Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save benomatis/61a1c9c4b1c1be1a7c76 to your computer and use it in GitHub Desktop.
Save benomatis/61a1c9c4b1c1be1a7c76 to your computer and use it in GitHub Desktop.
Flexslider: randomize slideshow speed of multiple slideshows
<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>
jQuery(document).ready(function($) {
$('.slider_wrapper').each(function() {
$(this).flexslider({
// other options
randomize: true,
slideshowSpeed: getRandomInt(1000, 5000)
});
});
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment