CODEWITHSUNDEEP
javascriptjqueryslick.js
Duggy G
Duggy G

Reputation: 477

Slick Slider stops looping

I have a carousel that is using slick.js, the way I have it working is that it shows an image for 1second then moves to the next slide which auto plays a video which when finishes moves onto the next slide which is also an image...my issue is that when the slide loops back to the 1st slide it stops autoplaying and just "sticks" on the first slide after the 1st cycle. How can I get the slider to keep looping through the slides?

Here is the js I have now:

jQuery(function($){

  var slider = $('.homeslider');

  slider.slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    autoplay: true,
    autoplaySpeed: 100,
    infinate: true,
    loop: true,
  });

  slider.on('afterChange', function(event, slick, currentSlide) {
    var vid = $(slick.$slides[currentSlide]).find('video');
    if (vid.length > 0) {
      slider.slick('slickPause');
      $(vid).get(0).play();
    }
  });



  var durationList = $('.slider__item').map(function(index, item) {
    return item.getAttribute('data-time');
  });

  var slideIndex = 0;
  var changeSlide = function(timing) {
    setTimeout(function() {
      if (timing !== 0) {
        slider.slick('slickNext');
      }
      if (slideIndex >= durationList.length) slideIndex = 0;
      changeSlide(durationList[slideIndex++]);

    }, timing);
  }
  changeSlide(0);

});

Each slide within the HTML has a data-time value which allows me to set a time for each slide which is something I need.

Upvotes: 1

Views: 9529

Answers (1)

Fernando Souza
Fernando Souza

Reputation: 1781

I guess your problem is a typo, please correct this: infinate ==> infinite

slider.slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    autoplay: true,
    autoplaySpeed: 100,
    infinite: true,
    loop: true,
  });

Upvotes: 1

Related Questions