CODEWITHSUNDEEP
jquerycarouselslick.js
Bijay Pakhrin
Bijay Pakhrin

Reputation: 1

Slick carousel doesn't slide all items

I am using Slick Carousel js by kenwheeler. Right now i have 7 slides in my carousel. I want to display 4 slides each time, which would result in 4 slide at first and then 3 slides next time. I want that white space at the end.

But the carousel keeps that one slide from before to adjust 4 slides each time i click next. You can understand what i want from these images below.

This is what i want. This is the result i want.

Right now it shows the previous slide even though i have already clicked next. This is what i have right now.

Upvotes: 0

Views: 1825

Answers (1)

Bijay Pakhrin
Bijay Pakhrin

Reputation: 1

So this is how i fixed my problem.

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

Upvotes: 0

Related Questions