光滑的滑块转到第一张幻灯片答案

【问题标题】：Slick slider goto first slide光滑的滑块转到第一张幻灯片
【发布时间】：2016-10-25 11:26:12
【问题描述】：

Slick 滑块设置为自动播放。在播放时，幻灯片从左到右或从头到尾。当滑块到达最后一张幻灯片时，它开始从最后一张幻灯片向后自动播放到第一张幻灯片。

当滑块到达最后一张幻灯片时，我希望滑块从第一张而不是最后一张开始播放。

最初当无限滚动为“真”时，一切正常。但由于要求，我不得不将无限滚动设置为“假”。当无限滚动设置为'false'时出现上述问题。

当滑块到达最后一张幻灯片时，我设法显示警报。我想做的是当滑块到达最后一张幻灯片时，我想转到第一张幻灯片而不是显示警报。

这里是Fiddle。

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

如果有人有解决方案/建议，请提供帮助。提前致谢。

【问题讨论】：

为什么你把无限设为假？你有什么理由做到这一点
将infinite参数改为true，否则会停在第8张幻灯片。
设置为 false 因为我不想在第一张幻灯片上显示左箭头，在最后一张幻灯片上显示右箭头。我更新了 sn-p 和 Fiddle 以隐藏禁用的导航箭头。

标签： jquery slick.js

【解决方案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();
  }
});

Updated Fiddle

有一个slickGoTo 函数，但如果在afterChange 事件处理程序中使用它就不起作用。

【讨论】：