매끄러운 캐 러셀로 모든 항목이 슬라이드되지 않습니다

Question

나는 kenwheeler 님에 의해 Slick Carousel 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); 
});