如何使光滑同步滑塊響應？

Question

我使用光滑同步添加了兩個滑塊。 我不知道如何讓他們做出回應。 我知道如何使用響應式[]使滑塊響應，但我無法繼續使用同步滑塊。

  $('.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 }); 

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以上沒有斷點，因此任何分辨率寬度的設置也是如此。

我有很多問題需要光滑才能正常工作，有時候必須改變頁面的加載順序以使其與其他控件一起使用，但是給它一個去看看它是否適合你。