我正在将 Slick 插入一个网站。我有主页
使用流畅的幻灯片放映,除了一件事我想不通。
我有 2 张幻灯片。他们从图像的重影版本进展
一个接一个地淡入图像的全分辨率
细节。那时我希望最后一张图片停下来并留在那里。
slider 的标记是:
<div class="column-right slide">
<div><img src="img/servicios/road.jpg" alt="Road"/></div>
<div><img src="img/sobre_mi/map.jpg" alt="Map"/></div>
</div>
我认为 infinite: false 会阻止它。实际发生的是
图像淡入完整(幻灯片 1-2),然后淡出重影
(幻灯片 2-1)连续。
实现的代码是:
$('.slide').slick({
autoplay: true,
autoplaySpeed: 1000,
dots: false,
infinite: false,
speed: 1000,
fade: true,
slide: 'div',
cssEase: 'linear'
});
我是不是遗漏了什么,误解了什么,或者这不是
可能的?似乎任何自动播放都应该有一种播放一次的方式(或一个
具体次数)
最佳答案
如果您希望 slider 在到达最后一张幻灯片时停止,您可以使用自定义方法来确定 slider 在第几张幻灯片上,然后从那里开始工作,如下所示:
- 找出 slider 中的元素总数(并将其减 1,因为 slider 从 0 开始计数)
- 在每张幻灯片更改后运行自定义函数,例如:
- 检查元素总数是否等于 slider 当前所在的最后一张幻灯片的编号
- 如果这些数字相等,则暂停 slider 或使用 slicksetoption 将自动播放覆盖为 false
更新
对于高于 1.4 的 slick 对比:
From the author: In slick 1.4, callback methods have been deprecated and replaced with events
所以基本上它的想法是一样的,除了一些小的变化:
var item_length = $('.slide > div').length - 1;
var slider = $('.slide').slick({
autoplay: true,
autoplaySpeed: 1000,
dots: false,
infinite: false,
speed: 1000,
fade: true,
slide: 'div',
cssEase: 'linear'
});
// On before slide change
slider.on('afterChange', function(event, slick, currentSlide, nextSlide){
//check the length of total items in .slide container
//if that number is the same with the number of the last slider
//Then pause the slider
if( item_length === slider.slick('slickCurrentSlide') ){
//this should do the same thing -> slider.slickPause();
slider.slickSetOption("autoplay",false,false)
};
});
查看 demo
对于 bellow slick 1.4
注意使用的js:
var item_length = $('.slide > div').length - 1;
var slider = $('.slide').slick({
autoplay: true,
autoplaySpeed: 1000,
dots: false,
infinite: false,
speed: 1000,
fade: true,
slide: 'div',
cssEase: 'linear',
onAfterChange: function(){
//check the length of total items in .slide container
//if that number is the same with the number of the last slide
//Then pause the slider
if( item_length == slider.slickCurrentSlide() ){
//this should do the same thing -> slider.slickPause();
slider.slickSetOption("autoplay",false,false)
};
}
});
查看 demo here 希望对您有所帮助!
关于jquery - 光滑的旋转木马。想要自动播放幻灯片一次并停止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28045086/