光滑的轮播响应断点

Posted 2023-05-07

【中文标题】光滑的轮播响应断点

【英文标题】：Slick carousel responsive breakpoints

【发布时间】：2015-10-18 13:59:06

【问题描述】：

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

$('#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',
    ,
  ],
)

除了一件事之外，它正在按应有的方式工作......当我将浏览器窗口的大小从 width: 1920 调整为 800 时，轮播将其解开，并且内容像普通 div 一样显示。

但是当我增加浏览器窗口的width 时，轮播不会重新创建它。它仍然像没有轮播的 html div 块。

任何帮助将不胜感激。

【参考方案1】：

unslick 是一种析构方法。 unslick 后，需要再次调用 slick() 来构造轮播。

【讨论】：

我也有同样的问题。你能告诉我你是怎么解决的吗？

【参考方案2】：

这是在 unslick 在断点处杀死轮播后重建轮播的一种方法：

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

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

【参考方案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
            
        

  ]


      ); 
    );

【参考方案4】：

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

/* Get element */
var slider = $('.slider');
 
/* Slider settings */
var 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);
   
);

$(window).trigger('resize');

【讨论】：

如果您在自己的调整大小处理程序中调用 unslick 时只需要 unslick，那么您实际上并不需要 responsive:[...] 部分。对吗？

好吧，您需要该部分进行初始滑块初始化，但我同意它可以写得更好。我编辑了我的响应 - 删除了响应设置，删除了初始滑块调用并触发了窗口上的“调整大小”事件。

【参考方案5】：

我解决了响应式断点问题，在任何浏览器调整大小时重新计算幻灯片的数量。.testimonialsList：这是我的轮播容器的名称。

// Create carousel
function createTestimonialCarousel(numberOfSlides)
    jQuery('.testimonialsList').not('.slick-initialized').slick(
        dots: true,
        arrows: true,
        infinite: true,
        slidesToShow: numberOfSlides,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 6000,
        pauseOnHover: true
    );


// Calculate number of slides to show
function calculateNumberOfSlidesToShow()
    var carouselWidth = jQuery(".testimonialsList").width();
    var numberOfSlides = 0;
    switch (true) 
        case (carouselWidth < 767):
            numberOfSlides = 1;
            break;
        case (carouselWidth < 991):
            numberOfSlides = 2;
            break;
        case (carouselWidth < 1199):
            numberOfSlides = 3;
            break;
        case (carouselWidth > 1200):
            numberOfSlides = 3;
            break;
    

    return numberOfSlides;


// Reload Carousel on browser resize (to make it responsible)
function reloadCarousel () 
    jQuery('.testimonialsList').slick('unslick');
    numberOfSlides = calculateNumberOfSlidesToShow();
    createTestimonialCarousel(numberOfSlides);


// Call updateMaxHeight when browser resize event fires
jQuery(window).on("resize", reloadCarousel);



jQuery(document).ready(function () 

    // Initialize the carousel on page load
    if (jQuery(".testimonialsList").length) 
        setTimeout(function () 
            numberOfSlides = calculateNumberOfSlidesToShow();
            createTestimonialCarousel(numberOfSlides);
        , 300);
    


);