Слайдер слайд анимировать обратно к первому слайду

Question

Я пытаюсь заставить скользящий слайдер вернуться к первому слайду после последнего слайда. Ближайший ответ на эту тему я нашел это:

Слайдер слайд к первому слайду

Но, к сожалению, он использует анимацию затухания, поэтому он не дает того эффекта, который мне нужен. Я хочу, чтобы слайд-шоу воспроизводилось до конца, а затем возвращалось к началу после отображения последнего слайда.

В моем случае есть только три слайда, и я могу легко запустить сообщение в консоли, когда будет достигнут последний, но метод Slickslider slickGoTo не работает.

(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>

Answer 1

Вы можете изменить триггерное событие на afterChange и прибегнуть к setTimeout функция, чтобы остаться на последнем слайде некоторое время (приблизительно 3 секунды).

Slick-слайдер, предотвращающий настраиваемое действие для его событий, также может быть переопределен с помощью setTimeout функция.

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

CODEPEN

Надеюсь это поможет.