jQuery Flexslider - 每张幻灯片的幻灯片放映速度不同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13269438/
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
Flexslider - different slideshow speed on each slide
提问by Rowan
I'm using Flexslider and have been asked to display each slide at a different time depending on how much content it has, so fast for a short sentence and slow for a paragraph. How can I set this up when flexslide allows just 1 Slideshowspeed value. My code:
我正在使用 Flexslider，并被要求在不同的时间显示每张幻灯片，具体取决于它有多少内容，对于短句子来说如此之快，对于一个段落来说如此之慢。当 flexslide 只允许 1 Slideshowspeed 值时，我该如何设置。我的代码：
$(window).load(function() {
$('#flexslider1').flexslider({
easing: "swing",
animation: "fade",
slideshowSpeed: 7000,
animationSpeed: 600,
startAt: 0,
initDelay: 0,
controlNav: true,
directionNav: true,
pausePlay: true,
pauseText: 'Pause',
playText: 'Play'
});
});
回答by nan
I was having the same issue trying to change only the speed of one slide to be different from the others. This is the script I used and it works!
我在尝试仅将一张幻灯片的速度更改为与其他幻灯片不同时遇到了同样的问题。这是我使用的脚本，它有效！
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
slideshowSpeed: 1500,
animationSpeed: 1000,
controlNav: false,
start: function(slider){
slider.removeClass('loading');
},
after: function(slider){
if(slider.currentSlide == 3){
slider.pause();
setTimeout(function(){
slider.play();
}, 5000);
}
}
});
});
I have 5 images total but I want the 4th slide (slider.currentSlide == 3) to stay longer for 5 secs.
我总共有 5 张图片，但我希望第 4 张幻灯片 (slider.currentSlide == 3) 停留更长时间 5 秒。
回答by tentwofour
Realizing that this is old, but for others looking, as I was, you can also do this: (Using FlexSlider v.2.2.2).
意识到这是旧的，但对于其他人来说，就像我一样，你也可以这样做：（使用 FlexSlider v.2.2.2）。
Add a data-duration attribute to the li's
将数据持续时间属性添加到 li 的
<div class="flexslider" data-animation="fade" data-control-nav="false" data-slideshow="true" data-start-at="0">
<ul class="slides">
<li data-duration="6000">
<img src="http://placehold.it/600x210" alt="Alt" />
</li>
<li data-duration="2000">
<img src="http://placehold.it/600x200" alt="Alt Text" />
</li>
</ul>
</div>
And in your page initialization:
在您的页面初始化中：
$hook = $('.flexslider');
$hook.flexslider({
animation: $hook.data('animation'),
controlNav: $hook.data('control-nav'),
slideshow: $hook.data('slideshow'),
startAt: $hook.data('start-at'),
pauseOnHover: true,
controlNav: false,
after: function(slider){
// clears the interval
slider.stop();
// grab the duration to show this slide
slider.vars.slideshowSpeed = $(slider.slides[slider.currentSlide]).data('duration');
// start the interval
slider.play();
}
});
Fiddle here:
在这里小提琴：
回答by Thibaut
I think i've found a solution. I use after callback to change the interval of slideshowSpeed:
我想我已经找到了解决方案。我使用回调后更改幻灯片速度的间隔：
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: time,
controlNav: false,
directionNav: false,
pauseOnAction: false,
pauseOnHover: false,
pausePlay: true,
after: function(slider){
clearInterval(slider.animatedSlides);
slider.animatedSlides = setInterval(slider.animateSlides,*YOURTIME in MS*)
},
start: function(slider){
$('body').removeClass('loading');
}
});
});
Hope it helps!
希望能帮助到你！
Thibaut.
蒂博。
回答by lalo
Combining two answers from above
结合上面的两个答案
$hook = $('.flexslider');
$hook.flexslider({
animation: $hook.data('animation'),
controlNav: $hook.data('control-nav'),
slideshow: $hook.data('slideshow'),
startAt: $hook.data('start-at'),
pauseOnHover: true,
controlNav: false,
start: function(slider) {
var start_time = $(slider.slides[slider.currentSlide]).data('duration');
clearInterval(slider.animatedSlides);
slider.animatedSlides = setInterval(slider.animateSlides, start_time);
},
after: function(slider){
// clears the interval
slider.stop();
// grab the duration to show this slide
slider.vars.slideshowSpeed = $(slider.slides[slider.currentSlide]).data('duration');
// start the interval
slider.play();
}
});回答by Eugene
Because AFTER callback CALL after first slide animation, we need add timeout to START callback (for 3 slides):
因为在第一张幻灯片动画之后回调 CALL 之后，我们需要在 START 回调中添加超时（对于 3 张幻灯片）：
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
directionNav: false,
pausePlay: true,
animationSpeed: 300,
start: function(slider) {
clearInterval(slider.animatedSlides);
slider.animatedSlides = setInterval(slider.animateSlides, YOUR_TIMEOUT_FOR_FIRST_SLIDE(ONLY FOR START));
},
after: function(slider){
if(slider.currentSlide == 0) {
clearInterval(slider.animatedSlides);
slider.animatedSlides = setInterval(slider.animateSlides, FIRST_TIMEOUT);
}
if(slider.currentSlide == 1) {
clearInterval(slider.animatedSlides);
slider.animatedSlides = setInterval(slider.animateSlides, SECOND_TIMEOUT);
}
if(slider.currentSlide == 2) {
clearInterval(slider.animatedSlides);
slider.animatedSlides = setInterval(slider.animateSlides, THIRD_TIMEOUT);
}
}
});
});
回答by A. Wolff
I dont know flexslider but you should be able to modificate speed in after event function callback. Something like that:
我不知道 flexslider，但您应该能够在事件函数回调后修改速度。类似的东西：
$('#flexslider1').flexslider({
easing: "swing",
animation: "fade",
slideshowSpeed: 7000,
animationSpeed: 600,
startAt: 0,
initDelay: 0,
controlNav: true,
directionNav: true,
pausePlay: true,
pauseText: 'Pause',
playText: 'Play',
after: function(){$(this).flexslider('slideshowSpeed',1000)}
});
But now, how can you now for which slide you have to change speed. Documentation of flexslider doesn't provide any information about which argument after callback function are passed. And depending how this plugin is coded, its maybe impossible to alter option on the fly, suggesting than you need to destroy the slider and recreate a new one keeping which step/slide is currently shown, weird coding.
但是现在，你怎么能现在为哪张幻灯片改变速度。flexslider 的文档没有提供关于回调函数传递后哪个参数的任何信息。并且根据此插件的编码方式，可能无法即时更改选项，这表明您需要销毁滑块并重新创建一个保持当前显示的步骤/幻灯片的新滑块，这是奇怪的编码。
So, ill suggest you to contact the main developper of this plugin or try to extend it by your own.
所以，我建议你联系这个插件的主要开发者或者尝试自己扩展它。
