Slick 滑块设置为自动播放。播放时，幻灯片从左到右或从第一个到最后一个。当滑块到达最后一张幻灯片时，它将开始从最后一张幻灯片向后自动播放到第一张幻灯片。
我希望当滑块到达最后一张幻灯片时，滑块从第一张幻灯片开始播放，而不是从最后一张幻灯片开始播放。
最初，当无限滚动“真实”时，一切都工作正常。
但由于要求，我不得不将无限滚动设置为“假”。当无限滚动设置为“false”时，会出现上述问题。
当滑块到达最后一张幻灯片时，我设法显示一条警报。我想做的是，当滑块到达最后一张幻灯片时，我想转到第一张幻灯片而不是显示警报。
这里是Fiddle http://jsfiddle.net/rickharrison1504/mhtrbhfx/.
$(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被设定为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();
}
});
更新了小提琴 http://jsfiddle.net/yassarikhan786/e11t36L3/
有一个slickGoTo函数，但如果在afterChange事件处理程序。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
