光滑的滑块转到第一张幻灯片
“滑动”滑块设置为自动播放。 在播放时,幻灯片从左到右或从头到尾。 当最后一张幻灯片到达滑块时,它会从最后一张幻灯片开始自动播放,然后向后滑动。
我想在最后一张幻灯片到达滑块时从第一张幻灯片而不是最后一张幻灯片播放滑块。
最初当无限滚动为’真’时,一切都运行正常。 但由于要求,我必须将无限滚动设置为’false’。 当无限滚动设置为’false’时,会出现上述问题。
当滑块到达最后一张幻灯片时,我设法显示警告。 我想要做的是当滑块到达最后一张幻灯片时,我想转到第一张幻灯片而不是显示警告。
这是小提琴 。
$(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.'); } }); });
.slick-arrow.slick-disabled { display: none !important; }
如果有人有解决方案/建议,请帮忙。 提前致谢。
正如其他评论者指出的那样,如果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
事件处理程序中使用,则afterChange
。