CODEWITHSUNDEEP
slick.js
bparticle
bparticle

Reputation: 157

Slick slider animate back to first slide

I am trying to make a Slick slider jump back to the first slide after the last slide. The closest answer to this topic I have found is this:

Slick slider goto first slide

But unfortunately it uses the fade animation so it does not have the effect I'm after. What I want is that the slideshow will play until the end and then scroll back to the beginning after the last slide is shown.

There are only three slides in my use case, and I can easily fire a message in the console when the last one is reached, but the slickslider method slickGoTo doesn't work.

(function($) {
  var slider = $('.sightbox__slideshow');
     
     slider.slick({
        arrows: false,
        autoplay: true,
        infinite: true,
      });

      function jumpBack() {
        slider.slick('slickGoTo', 0);
      }

      slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
        console.log(currentSlide);
        if (currentSlide === 2 ) {
          console.log('last slide');
          jumpBack();
        }
      });
      
})(jQuery);
.sightbox__slideshow {
  width: 250px;
  padding: 50px;
}

.sightbox__slide--1 {
  background-color: pink;
}
.sightbox__slide--2 {
    background-color: green;
}
.sightbox__slide--3 {
    background-color: yellow;
}
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>

<div class="sightbox__slideshow">
  <div class="sightbox__slide sightbox__slide--1" id="sightbox__slide--1">
    <div alt="" class="sightbox__slide-img"></div>
    <p class="sightbox__slide-txt">1. first</p>
  </div>
  <div class="sightbox__slide sightbox__slide--2" id="sightbox__slide--2">
    <div alt="" class="sightbox__slide-img"></div>
    <p class="sightbox__slide-txt">2. second</p>
  </div>
  <div class="sightbox__slide sightbox__slide--3" id="sightbox__slide--3">
    <div alt="" class="sightbox__slide-img"></div>
    <p class="sightbox__slide-txt">3. third</p>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>

Upvotes: 4

Views: 18256

Answers (1)

Gibin Ealias
Gibin Ealias

Reputation: 2859

You may change the trigger event to afterChange and resort to setTimeout function to stay on the last slide for a while (3 seconds approx).

The slick-slider preventing a custom action on its events can also be overridden using the setTimeout function.

function jumpBack() {
  setTimeout(function() {
    slider.slick("slickGoTo", 0);
  },3000);
}

CODEPEN

Hope this helps.

Upvotes: 7

Related Questions