Question

I’m currently using Jquery Cycle plugin for my project and the slideshow is running smoothly. However, I want my slide to display or start with a different image on every page refresh. I’m not sure how to add a function/script to achieve that or if it’s possible. I’m new to JQuery so any help would greatly be appreciated!

Script:

$(document).ready(function() {
    $('.slideshow').cycle({
         fx: 'fade',
         speed: 2500,
         timeout: 7000,
         prev: '#prev',
         next: '#next',
    });
});

---

My HTML:

<div class="slideshow">
    <img src="images/img_slide-1.jpg" />
    <img src="images/img_slide-2.jpg" />
    <img src="images/img_slide-3.jpg" />
</div>

Answer 1

Use the startingslide option

startingSlide: 0,     // zero-based index of the first slide to be displayed 

To pick a random slide you need to get a random index like this

var rand = Math.floor(Math.random() * $('.slideshow img').length);

Then, when you initiliaze the cycle, use the rand variable as the startingslide.

$(document).ready(function() {
  var rand = Math.floor(Math.random() * $('.slideshow img').length);
  $('.slideshow').cycle({
    fx: 'fade',
    speed: 2500,
    timeout: 7000,
    prev: '#prev',
    next: '#next',
    startingSlide: rand
  });
});