0

При использовании 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,

            }
        },
    ]
};

введите сюда описание изображения

1 ответ 1

0

помог откат версии:

yarn add react-slick@^0.26.1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.