光滑的旋轉木馬不滑動所有項目

Question

我使用kenwheeler的滑動旋轉木馬js。現在我的旋轉木馬上有7張幻燈片。我想每次顯示4張幻燈片，這會導致首先滑動4張，然後再次滑動3張幻燈片。我最終需要那個空白空間。

但是，旋轉木馬保持從前一張幻燈片，每次我點擊下一步調整4張幻燈片。您可以從下面的這些圖像中瞭解我想要的內容。

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

現在它顯示上一張幻燈片，即使我已經點擊下一個。 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); 
});