Проблема со slick слайдером?

Question

[Ylia1234]

Соединяю два слик слайдера, когда маленькие карточки расположены по горизонтали они при листании движуться в неизвестность , подскажите почему?

$('.detal-popup__listing').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
centerMode: true,
draggable: false,
asNavFor: '.product-detail__popup',
prevArrow: $('.card-popup__left'),
nextArrow: $('.card-popup__right'),
responsive: [
{
breakpoint: 630,
settings: {
vertical: false,
arrows: true,
draggable: true,
}
}
]
});
$('.product-detail__popup').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.detal-popup__listing',
dots: false,
vertical: true,
draggable: false,
centerMode: false,
infinite: true,
focusOnSelect: true,
//useTransform: false,
prevArrow: $('.bg-mobile-left'),
nextArrow: $('.bg-mobile-right'),
responsive: [
{
breakpoint: 630,
settings: {
vertical: false,
draggable: true,
}
}
]
});

Answer 1

[igumenov]

Была та же проблема. Решил таким конфигом

$('.js-product-gallery').slick({
        infinite: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        fade: false,
        asNavFor: '.js-product-gallery-thumbs',
        prevArrow: '<div class="slick-arrow prev"><svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24 15H6m0 0l5.04-6.6M6 15l5.04 6.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>',
        nextArrow : '<div class="slick-arrow next"><svg width="30" height="30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 15h18m0 0l-5.04-6.6M24 15l-5.04 6.6" stroke-linecap="round" stroke-linejoin="round"/></svg></div>',
        responsive: [{
                breakpoint: 768,
                settings: {
                    arrows: false,
                    dots: true,
                }
            }
        ]
    });
    $('.js-product-gallery-thumbs').slick({
        infinite: false,
        slidesToShow: 6,
        asNavFor: '.js-product-gallery',
        dots: false,
        focusOnSelect: true,
        arrows: false,
        draggable: false,
        responsive: [{
                breakpoint: 1024,
                settings: {
                    slidesToShow: 5,
                }
            }
        ]
    });