Question

我使用光滑同步添加了两个滑块。我不知道如何让他们做出回应。我知道如何使用响应式[]使滑块响应，但我无法继续使用同步滑块。

＆＃13;

 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

＆＃13;

Answer 1

正如您有点指出自己，您需要使用响应[]部分使其按预期工作。例如：

    $('.section').slick({
        centerMode: true,
        centerPadding: '25px',
        infinite: false,
        arrows: true,
        initialSlide: 1,
        slidesToShow: 1,
        responsive: [
            {
                breakpoint: 3000,
                setting: {
                    slidesToShow: 3
                }
            },
            {
                breakpoint: 1400,
                setting: {
                    slidesToShow: 2
                }

            },
            {
                breakpoint: 800,
                setting: {
                    slidesToShow: 1
                }

            }
        ]
    });

以上示例将显示3000px和1400px之间的3张幻灯片，1400px和800px之间的2张幻灯片以及800px以下的1张幻灯片。由于没有高于3000px的断点，因此任何分辨率宽度的设置也将高于此值。

我有很多问题需要光滑才能正常工作，有时候必须更改页面的加载顺序才能使其与其他控件一起使用，但请稍等一下，看看它是否适合您。

如何使Slick同步滑块响应？

1 个答案: