title: Slick slider animate back to first slide
body: <p>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:</p>
  
  <p><a href="https://stackoverflow.com/questions/37986346/slick-slider-goto-first-slide">Slick slider goto first slide</a></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(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);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.sightbox__slideshow {
    width: 250px;
    padding: 50px;
  }
  
  .sightbox__slide--1 {
    background-color: pink;
  }
  .sightbox__slide--2 {
      background-color: green;
  }
  .sightbox__slide--3 {
      background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/&gt;
  
  &lt;div class="sightbox__slideshow"&gt;
    &lt;div class="sightbox__slide sightbox__slide--1" id="sightbox__slide--1"&gt;
      &lt;div alt="" class="sightbox__slide-img"&gt;&lt;/div&gt;
      &lt;p class="sightbox__slide-txt"&gt;1. first&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="sightbox__slide sightbox__slide--2" id="sightbox__slide--2"&gt;
      &lt;div alt="" class="sightbox__slide-img"&gt;&lt;/div&gt;
      &lt;p class="sightbox__slide-txt"&gt;2. second&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="sightbox__slide sightbox__slide--3" id="sightbox__slide--3"&gt;
      &lt;div alt="" class="sightbox__slide-img"&gt;&lt;/div&gt;
      &lt;p class="sightbox__slide-txt"&gt;3. third&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://kenwheeler.github.io/slick/slick/slick.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>