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