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

Question

我正在使用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'
    }); 
});

Answer 1

我试图改变一张幻灯片的速度与其他幻灯片不同,我遇到了同样的问题.这是我使用的脚本,它的工作原理!

  <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秒以上.

Answer 2

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

希望能帮助到你!

蒂博.

Answer 3

意识到这已经很老了，但是对于像我一样的其他人，您也可以这样做：（使用FlexSlider v.2.2.2）。

将数据持续时间属性添加到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>

在页面初始化中：

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

Answer 4

我不知道 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 的文档没有提供有关回调函数后传递哪个参数的任何信息。并且根据此插件的编码方式，可能无法动态更改选项，这表明您需要销毁滑块并重新创建一个新滑块，以保留当前显示的步骤/幻灯片，这是奇怪的编码。

因此，我建议您联系该插件的主要开发人员或尝试自己扩展它。