Question

我正在使用kenwheeler的Slick Carousel js。现在我的旋转木马上有7张幻灯片。我想每次显示4张幻灯片，这将首先导致4张幻灯片，然后是3张幻灯片。我最后想要那个空白区域。

但旋转木马会保留以前的一张幻灯片，每次点击下一张时调整4张幻灯片。您可以从下面这些图片中了解我想要的内容。

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

Answer 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);
});

光滑的旋转木马不会滑动所有物品

1 个答案: