光滑的滑块动画回到第一张幻灯片
Slick slider animate back to first slide
我正在尝试让 Slick 滑块在最后一张幻灯片之后跳回到第一张幻灯片。我找到的与该主题最接近的答案是:
但不幸的是它使用了淡入淡出动画,所以它没有我想要的效果。我想要的是幻灯片将播放到最后,然后在显示最后一张幻灯片后滚动回开头。
我的用例中只有三张幻灯片,当到达最后一张时,我可以轻松地在控制台中触发一条消息,但是 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>
您可以将触发事件更改为 afterChange
并使用 setTimeout
功能在最后一张幻灯片上停留一段时间(大约 3 秒)。
也可以使用 setTimeout
函数覆盖 slick-slider 阻止对其事件执行自定义操作的功能。
function jumpBack() {
setTimeout(function() {
slider.slick("slickGoTo", 0);
},3000);
}
希望这对您有所帮助。
我正在尝试让 Slick 滑块在最后一张幻灯片之后跳回到第一张幻灯片。我找到的与该主题最接近的答案是:
但不幸的是它使用了淡入淡出动画,所以它没有我想要的效果。我想要的是幻灯片将播放到最后,然后在显示最后一张幻灯片后滚动回开头。
我的用例中只有三张幻灯片,当到达最后一张时,我可以轻松地在控制台中触发一条消息,但是 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>
您可以将触发事件更改为 afterChange
并使用 setTimeout
功能在最后一张幻灯片上停留一段时间(大约 3 秒)。
也可以使用 setTimeout
函数覆盖 slick-slider 阻止对其事件执行自定义操作的功能。
function jumpBack() {
setTimeout(function() {
slider.slick("slickGoTo", 0);
},3000);
}
希望这对您有所帮助。