Question

这是我用来在我的网页上创建光滑轮播的配置。

$('#carousel').slick({
                      infinite: true,
                      slidesToShow: 3,
                      slidesToScroll: 1,
                      arrows: true,
                      autoplay: true,
                      autoplaySpeed: 2000,
                      responsive: [
                            {
                              breakpoint: 1200,
                              settings: {
                                slidesToShow: 2,
                                slidesToScroll: 1
                              }
                            },
                            {
                              breakpoint: 1008,
                              settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1
                              }
                            },
                            {
                              breakpoint: 800,
                              settings: "unslick"
                            }

                          ]
            });

除了一件事之外它正在工作的方式工作，当我将我的浏览器窗口从1920宽度调整到800宽度时，旋转木马不显示并且内容显示为正常div，但是当我增加宽度时浏览器窗口的轮播不会重新创建。它仍然像没有轮播的HTML div块。

任何帮助都将不胜感激。

Answer 1

unslick是一个析构函数方法。取消选择后，您需要再次调用slick（）来构建轮播。

Answer 2

这是在unlick在断点处杀死旋转木马后重建旋转木马的一种方法：

$(window).resize(function () {
    $('.js-slider').not('.slick-initialized').slick('resize');
});

$(window).on('orientationchange', function () {
    $('.js-slider').not('.slick-initialized').slick('resize');
});

Answer 3

<section class="regular slider" style="direction:ltr">
    <div>
        <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=6">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=6">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=7">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=8">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=9">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=10">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=11">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=12">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=13">
    </div>
    <div>
        <img src="http://placehold.it/350x300?text=14">
    </div>
</section>

/////脚本/////

    $(document).on('ready', function() {

      $(".regular").slick({
        dots: false,
        infinite: true,
        slidesToShow: 6,
        slidesToScroll: 6,
        autoplay: true,
        autoplaySpeed: 2000,

          pauseOnHover: true,

        responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 5,
                slidesToScroll: 5,
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 3
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        }

  ]


      }); 
    });

Answer 4

在每次浏览器调整大小事件时，您都需要进行检查并在需要时重新初始化Slick滑块（如果您在移动设备上且Slick滑块未初始化）。

/* Get element */
var slider = $('.slider');

/* Slider settings */
var settings = {
   ...
   mobileFirst: true,
   responsive: [{
      breakpoint: 800,
      settings: "unslick"
   }]
}

/* Initialize the Slick slider */
slider.slick(settings);

/* Do this every time window gets resized */
$(window).on('resize', function() {

   /* If we are above mobile breakpoint unslick the slider */
   if ($(window).width() >= 800) 
   {
      /* Do this only if slider is initialized */
      if (slider.hasClass('slick-initialized')) {
         slider.slick('unslick');
      }
      return;
   }
   /* We are below mobile breakpoint, initialize the slider
      if it is not already initialized */
   else if (!slider.hasClass('slick-initialized')) 
   {
      return slider.slick(settings);
   }

光滑的轮播响应断点

4 个答案: