jQuery 光滑的旋转木马。想要自动播放一次并停止播放幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28045086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick carousel. Want autoplay to play the slides once and stop
提问by Antonio
I am plugging Slick into a site. I have the home page
working with a slick slide show except for one thing I can not figure out.
我正在将 Slick 插入一个站点。
除了我无法弄清楚的一件事之外，我的主页使用了一个漂亮的幻灯片。
I have 2 slides. They progress from a ghosted version of the image
fading in one by one to a full resolution of the image in all its
detail. At that point I want the last image to stop and stay there.
我有 2 张幻灯片。它们从图像的重影版本
一个接一个渐隐到图像的所有
细节的全分辨率。那时我希望最后一张图片停下来并留在那里。
The mark up for the slider is:
滑块的标记是：
<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>
I figured infinite: false would stop it. What actually happens is the
image fades in to full (slides 1-2) and then fades back out to ghosted
(slides 2-1) continuously.
我认为无限：假会阻止它。实际发生的是
图像
连续淡入到完整（幻灯片 1-2）然后淡出到重影（幻灯片 2-1）。
The code to implement is:
要实现的代码是：
$('.slide').slick({
autoplay: true,
autoplaySpeed: 1000,
dots: false,
infinite: false,
speed: 1000,
fade: true,
slide: 'div',
cssEase: 'linear'
});
Am I missing something, misunderstanding something or is this not
possible? Seems any autoplay should have a way to play once (or a
specific number of times)
我是否遗漏了什么，误解了什么，或者这是
不可能的？似乎任何自动播放都应该可以播放一次（或
特定次数）
回答by RGLSV
If you want the slider to stop when it reaches the last slide, you could use a custom method to determine on what slide number the slider is and work your way from there like bellow:
如果您希望滑块在到达最后一张幻灯片时停止，您可以使用自定义方法来确定滑块的幻灯片编号，然后从那里开始工作，如下所示：
- find the total items that you have in your slider (and decrease it by 1 since the slider counts its slides from 0 )
- run a custom function after each slide is changed like:
- check if the total items number is equal to the last slide number that the slider is currently on
- if those numbers are equals, the pause the slider or use slicksetoption to overwrite the autoplay to false
- 找到您的滑块中的总项目（并将其减少 1，因为滑块从 0 开始计算它的幻灯片）
- 在每张幻灯片更改后运行自定义函数，例如：
- 检查总项目数是否等于滑块当前所在的最后一张幻灯片编号
- 如果这些数字相等，则暂停滑块或使用 slicksetoption 将自动播放覆盖为 false
Update
更新
For slick above 1.4 vs:
对于 1.4 以上的圆滑 vs：
From the author: In slick 1.4, callback methods have been deprecated and replaced with events
来自作者：在 slick 1.4 中，回调方法已被弃用并替换为事件
So basically it's the same idea, except a few minor changes:
所以基本上它是相同的想法，除了一些小的变化：
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)
};
});
Check out the demo
查看演示
For bellow slick 1.4
对于波纹管光滑 1.4
Note the js used:
注意使用的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)
};
}
});
Check out the demo hereand hope it helps!
回答by jmarceli
For me (Slick 1.5.8) @Crispy-George solution doesn't work. I have to use following code instead:
对我来说（Slick 1.5.8）@Crispy-George 解决方案不起作用。我必须使用以下代码：
var slider = $('.slide').slick({
autoplay: true,
autoplaySpeed: 1000,
dots: false,
infinite: false,
speed: 1000,
fade: true,
slide: 'div',
cssEase: 'linear'
});
// Here is most important part of the code which actually stops the slider
slider.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 ){
slick.paused = true;
}
});
More in docs: https://github.com/kenwheeler/slick(sections Eventsand Methodsare most helpful in this problem)
更多文档：https: //github.com/kenwheeler/slick（事件和方法部分对这个问题最有帮助）
