При использовании breakpoint, у класса .slick-track получает стиль: transform: translate3d(269px, 0px, 0px) Из за этого слайды выходят за область видимости устройства Если убрать brealpoint, то все работает корректно, но я вижу 3 слайда в мобильной версии а нужен 1
Настройки слайдера:
const TeamSlider = ({slides, slidesToShow=3}) => {
const settings = {
slidesToShow: +slidesToShow,
slidesToScroll: 1,
rows: 1,
arrows: true,
dots: false,
infinite: false,
speed: 60,
nextArrow: <NextArrow positionStyles={{
top: '0',
right: '-75px',
background: 'none',
transform: 'rotate(-90deg) scale(1.7)',
width: 'unset',
height: 'unset',
}}/>,
prevArrow: <PrevArrow positionStyles={{
top: '0',
right: '-35px',
background: 'none',
transform: 'rotate(-90deg) scale(1.7)',
width: 'unset',
height: 'unset',
}}/>,
responsive: [
{
breakpoint: 800,
settings: {
nextArrow: <NextArrow positionStyles={{
top: '0',
right: '-90px',
background: 'none',
transform: 'rotate(-90deg) scale(1.7)',
width: 'unset',
height: 'unset',
}}/>,
prevArrow: <PrevArrow positionStyles={{
top: '0',
right: '-55px',
background: 'none',
transform: 'rotate(-90deg) scale(1.7)',
width: 'unset',
height: 'unset',
}}/>,
},
},
{
breakpoint: 720,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
},
{
breakpoint: 540,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
}
},
]
};