光滑的轮播不会滑动所有项目答案

【问题标题】：Slick carousel doesn't slide all items光滑的轮播不会滑动所有项目
【发布时间】：2016-12-03 16:21:36
【问题描述】：

我正在使用 kenwheeler 的 Slick Carousel js。现在我的轮播中有 7 张幻灯片。我想每次显示 4 张幻灯片，这将导致第一次显示 4 张幻灯片，然后下次显示 3 张幻灯片。我想要最后的空白。

但轮播会保留之前的一张幻灯片，以便在我每次单击下一步时调整 4 张幻灯片。你可以从下面的这些图片中了解我想要什么。

这就是我想要的。 This is the result i want.

现在它显示上一张幻灯片，即使我已经点击了下一张。 This is what i have right now.

【问题讨论】：

标签： jquery carousel slick.js

【解决方案1】：

这就是我解决问题的方法。

wrapSlider();
carouselOptions();
var resizeTimer;

function wrapSlider() {
  var viewport = jQuery(window).width();
  var slides = jQuery('.carousel > .slide');

  if (viewport > 767) {
     for (var i = 0; i < slides.length; i += 3) {
       slides.slice(i, i + 3).wrapAll("<div class='slide-wrapper'></div>");
    }
  }
}

function unwrapSlider() {
  var viewport = jQuery(window).width();

   if (viewport < 768) {
     if ($('.slide').parent().is(".slide-wrapper")) {
        $('.slide').unwrap();
    }

    $('.slide-wrapper').remove();
   }
}

function carouselOptions() {
  jQuery('.carousel').slick({
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    adaptiveHeight: true,
    autoplay: false,
    autoplaySpeed: 5000,
    cssEase: 'linear',
    pauseOnHover: false,
    arrows: false,
    draggable: false,
    focusOnSelect: false,
    dots: true
  });
}

$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    // Run code here, resizing has "stopped"
    jQuery('.carousel').slick('unslick');

    unwrapSlider();
    wrapSlider();
    carouselOptions();

  }, 250);
});

【讨论】：