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

Question

Слайдер Slick настроен на автозапуск. Во время воспроизведения слайды идут слева направо или с начала до конца. Когда ползунок достигнут на последнем слайде, он начинает автоматическое воспроизведение с последнего слайда до первого слайда в обратном направлении.

Я хочу, чтобы слайдер воспроизводился с первого слайда, а не с последнего, когда слайдер достигнут на последнем слайде.

Первоначально, когда бесконечный свиток был "истиной", все работало нормально. Но из-за требования я должен был установить бесконечный свиток на "ложь". Вышеупомянутая проблема возникла, когда бесконечная прокрутка установлена ​​в "ложь".

Когда слайдер достигает последнего слайда, мне удалось показать предупреждение. То, что я хотел сделать, это когда слайдер достигнет последнего слайда, я хотел перейти к первому слайду вместо того, чтобы показывать предупреждение.

Вот скрипка.

$(document).ready(function() {

var slider2 = $('.slider-2').slick({
    dots: true,
    infinite: false,
    autoplay: true,
    autoplaySpeed: 1000,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
    cssEase: 'linear'
});

slider2.on('afterChange', function(event, slick, currentSlide){
// slick - is a slider object with a lot of useful info
// currentSlide - is a current slide index (starts from 0)
if( slick.slideCount === currentSlide + 1 ){
     alert('Instead of showing alert goto slide 1.');
}
});

});

<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="https://kenwheeler.github.io/slick/css/prism.css" rel="stylesheet"/>
<link href="https://kenwheeler.github.io/slick/css/style.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<style>
.slick-arrow.slick-disabled {
    display: none !important;
}
</style>
<section id="features" class="blue">
<div class="content">
  <div class="slider slider-2">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
    <div><h3>7</h3></div>
    <div><h3>8</h3></div>
  </div>
</div>
</section>

Если у кого-то есть решение / предложение, пожалуйста, помогите. Заранее спасибо.

Answer 1

Как отмечали другие комментаторы, вы не сможете перейти к первому слайду, если infinite установлен в false, В своем комментарии вы упомянули, что не хотите показывать стрелку влево на первом слайде и стрелку вправо на последнем слайде. Вы можете добиться этого путем мониторинга currentSlide и скрытие / показ кнопок со стрелками, как требуется.

slider2.on('afterChange', function(event, slick, currentSlide) {
  //If we're on the first slide hide the Previous button and show the Next
  if (currentSlide === 0) {
    $('.slick-prev').hide();
    $('.slick-next').show();
  } else {
    $('.slick-prev').show();
  }

  //If we're on the last slide hide the Next button.
  if (slick.slideCount === currentSlide + 1) {
    $('.slick-next').hide();
  }
});

Обновленная скрипка

Есть slickGoTo функция, но это не работает, если используется в afterChange обработчик события.