How to randomize slideshow speed in Flexslider?

Question

I have been struggling with this for hours yesterday, and just couldn't come up with a good way of randomizing slideshow speed in FlexSlider.

One of the ways I tried was to try and remove the element I was applying it to (using jQuery's remove() and append() functions), but that proved to be very cumbersome, and only allowed me to make the slider appear / disappear at given times (using setInterval / setTimeout), did not allow to make use of the rest of the features of the script (like sliding effect for example).

So finally, this is what I came up with. I was originally hoping to randomize slideshowSpeed again and again, at every image display, but I found it would have been only possible if I removed and re-added the element, and applied flexfield on it again. I ended up accepting the fact that this wasn't possible, however the solution got me almost exactly where I wanted to be: to see multiple slideshows at once, transitioning at different speeds:

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>

EDIT: The question is: is there any way to not only randomize slideshow speed within one slider, but do that (update the slideshow time with a new random number) every time a new image shows?

Answer 1

i use something similar. My LI elements do have a data-attribute to pass it's duration value (getting it from DB for each slide) to flexslider's JS.

You may have a look at the "before:" option of Flexslider, permitting to change a slides attribute before it gets loaded:

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

i didn't run the code, so you may adjust/correct it to your needs, but it should do what you are looking for. Just add the "before:" block to your code, replacing the slideshowSpeed line, and you should be fine.