如何随机化 Flexslider 中的幻灯片放映速度？

Question

昨天我已经为此苦苦挣扎了几个小时，只是想不出一个在 FlexSlider 中随机化幻灯片放映速度的好方法。

我尝试的方法之一是尝试删除我应用它的元素（使用 jQuery 的 remove() 和 append() 函数），但事实证明非常麻烦，只允许我让滑块在给定时间出现/消失（使用 setInterval / setTimeout），不允许使用脚本的其余功能（如例如滑动效果）。

最后，这就是我想到的。我最初希望在每次显示图像时一次又一次地随机化 slideshowSpeed，但我发现只有删除并重新添加该元素并再次对其应用弹性域才有可能。我最终接受了这是不可能的事实，但是解决方案几乎完全达到了我想要的目的：一次观看多个幻灯片，以不同的速度转换：

jQuery(document).ready(function($) {
  $('.slider_wrapper').each(function() {
    $(this).flexslider({
      animation: "fade",
      animationLoop: true,
      itemMargin: 0,
      minItems: 1,
      maxItems: 1,
      slideshow: true,
      controlNav: false,
      directionNav: false,
      smoothHeight: true,
      move: 1,
      randomize: true,
      slideshowSpeed: getRandomInt(1000, 5000)
    });
  });

  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }
});

.slider_wrapper {
  float:left;
  width:33%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/flexslider/2.4/jquery.flexslider-min.js"></script>
<link href="//cdn.jsdelivr.net/flexslider/2.4/flexslider.css" rel="stylesheet" />
<div class="slider_wrapper">
  <div class="flexslider" data-height="250">
    <ul class="slides">
      <li>
        <img src="http://placehold.it/250/000000/ffffff" alt="" />
      </li>
      <li>
        <img src="http://placehold.it/250/ff0000/ffffff" alt="" />
      </li>
      <li>
        <img src="http://placehold.it/250/0000ff/000000" alt="" />
      </li>
    </ul>
  </div>
</div>
<div class="slider_wrapper">
  <div class="flexslider" data-height="250">
    <ul class="slides">
      <li>
        <img src="http://placehold.it/250/000000/ffffff" alt="" />
      </li>
      <li>
        <img src="http://placehold.it/250/ff0000/ffffff" alt="" />
      </li>
      <li>
        <img src="http://placehold.it/250/0000ff/000000" alt="" />
      </li>
    </ul>
  </div>
</div>
<div class="slider_wrapper">
  <div class="flexslider" data-height="250">
    <ul class="slides">
      <li>
        <img src="http://placehold.it/250/000000/ffffff" alt="" />
      </li>
      <li>
        <img src="http://placehold.it/250/ff0000/ffffff" alt="" />
      </li>
      <li>
        <img src="http://placehold.it/250/0000ff/000000" alt="" />
      </li>
    </ul>
  </div>
</div>

编辑：问题是：是否有任何方法不仅可以在一个滑块内随机化幻灯片放映速度，而且可以做到这一点（用新的随机数更新幻灯片放映时间）什么时候显示新图片？

Answer 1

我使用类似的东西。我的 LI 元素确实有一个数据属性来将它的持续时间值（从每张幻灯片的数据库中获取）传递给 flexslider 的 JS。

您可以查看 Flexslider 的 "before:" 选项，允许在加载之前更改幻灯片属性：

<script type="text/javascript">
    $(window).load(function(){      
        $hook = $('.flexslider');
        $hook.flexslider({
            animation: $hook.data('animation'),
            controlNav: $hook.data('control-nav'),
            slideshow: $hook.data('slideshow'),
            startAt: $hook.data('start-at'),
            pauseOnHover: false,
            controlNav: false,
            video: true,
            before: function(slider){
                // clears the interval
                slider.stop();
                // grab a random duration to show this slide
                slider.vars.slideshowSpeed = getRandomInt(1000, 5000);
                // start the interval
                slider.play();
            }
        });
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
        }
    });             
    </script>

我没有运行代码，所以您可以 adjust/correct 它满足您的需要，但它应该能满足您的需求。只需将 "before:" 块添加到您的代码中，替换 slideshowSpeed 行，您应该没问题。

如何随机化 Flexslider 中的幻灯片放映速度？

How to randomize slideshow speed in Flexslider?

random

jquery

flexslider