Flexslider - 每张幻灯片上的不同幻灯片显示速度

我使用的是Flexslider，并被要求在不同的时间显示每张幻灯片，具体取决于它具有多少内容，对于短句和段落速度如此之快。当flexslide只允许1个幻灯片速度值时，我该如何设置它。我的代码：Flexslider - 每张幻灯片上的不同幻灯片显示速度

$(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' 
    }); 
});

来源

2012-11-07 Rowan

我不知道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)} 
});

但是，现在，你怎么能为哪张幻灯片，你必须改变速度。 flexslider的文档没有提供有关回调函数传递后的参数的任何信息。取决于这个插件是如何编码的，它可能不可能在飞行中改变选项，暗示你需要销毁滑块并重新创建一个新的插件，以保持当前显示的步骤/幻灯片，奇怪的编码。

所以，生病建议你联系这个插件的主要开发者或尝试扩展它自己。

来源

2012-11-07 12:13:08

我想我找到了解决方案。我的回调后用来改变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'); 
     } 
     }); 
    });

希望它能帮助！

Thibaut。

来源

2012-11-15 08:17:43 Thibaut

的最佳解决方案，谢谢。如果您想将* YOURTIME基于下一个窗格内容的MS *变量，您可以使用类似于以下内容的项目： var chars = -80 + slider.slides [slider.animatingTo] .innerText。长度* 30; （-80大约是我在幻灯片中使用的标记的长度，而* 30是一个很好的乘法器，给用户留下足够的时间来查看结果）。 HTH。 – keithl8041

这是完美的。我已经为每张幻灯片设置了每个速度所需的数组，每个幻灯片更改后的每个项目都会增加“后续”函数。 – Simon27

我有同样的问题试图改变只有一个幻灯片的速度不同于其他人。这是我使用的脚本，它的工作原理！

<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); 
     } 
    } 
    }); 
});

我有5倍总的图像，但我希望第4幻灯片（slider.currentSlide == 3）延长逗留时间为5秒。

来源

2013-02-15 16:49:13 nan

因为经过第一张幻灯片动画后回拨电话，我们需要增加超时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); 
      } 
     }   
    }); 
    });

来源

2013-04-07 20:10:15 Eugene

意识到这是旧的，但对于其他人看，因为我是，你可以也可以这样做:(使用FlexSlider v.2.2.2）。

添加数据持续时间属性到李的

<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>

而在你的页面初始化：

$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(); 
        } 
       });

小提琴这里：

http://jsfiddle.net/uzery/3/

来源

2014-06-09 20:56:54 tentwofour

从上面结合两个答案

$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(); 
 
    } 
 
});

来源

2017-10-11 15:41:22 lalo

Flexslider - 每张幻灯片上的不同幻灯片显示速度

回答

相关问题