Flexslider - 每张幻灯片上不同的幻灯片放映速度答案

【问题标题】：Flexslider - different slideshow speed on each slideFlexslider - 每张幻灯片上不同的幻灯片放映速度
【发布时间】：2017-10-11 23:41:22
【问题描述】：

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

【问题讨论】：

标签： jquery flexslider

【解决方案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 秒。

【讨论】：

【解决方案2】：

我想我找到了解决办法。我使用 after callback 来改变 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');
        }
      }); 
    });

希望对你有帮助！

蒂博。

【讨论】：

很好的解决方案，谢谢。如果您想将 YOURTIME in MS 变量基于下一个窗格的内容，您可以使用类似 var chars = -80 + slider.slides[slider.animatingTo].innerText.length * 30 ; （-80 大约是我在幻灯片中使用的标记的长度，*30 是一个很好的乘数，它为用户留出足够的时间查看结果）。 HTH。
这是完美的。我已经设置了一个数组，其中包含每张幻灯片所需的每种速度，并且 after 函数在每张幻灯片更改时通过每个项目递增。

【解决方案3】：

意识到这是旧的，但对于其他人来说，像我一样，你也可以这样做：（使用 FlexSlider v.2.2.2）。

给 li 添加一个 data-duration 属性

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

【讨论】：

感谢@tentwofout，但pauseOnHover 无法正常工作，它会在悬停时暂停但永远不会恢复。

【解决方案4】：

因为在第一张幻灯片动画之后的回调 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);
            }
        }          
    });
  });

【讨论】：

【解决方案5】：

结合上面的两个答案

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

【讨论】：

【解决方案6】：

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

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

【讨论】：