Random Image on page load

Hi, I have a jquery slider, In which i want to Load the images for each refresh or re-opening the page, the first image should be random then it will go in it’s order. My code is below



      $("#slider4").responsiveSlides({
        auto: true,
        pager: false,
        nav: true,
        speed: 500,
        namespace: "callbacks",
        before: function () {
          $('.events').append("<li>before event fired.</li>");
        },
        after: function () {
          $('.events').append("<li>after event fired.</li>");
        }
      });

    });
	

My html is like below


<div class="callbacks_container">
      <ul class="rslides" id="slider4">
        <li>
          <img src="images/1.jpg" alt="">
          <p class="caption">This is a caption</p>
        </li>
        <li>
          <img src="images/2.jpg" alt="">
          <p class="caption">This is another caption</p>
        </li>
        <li>
          <img src="images/3.jpg" alt="">
          <p class="caption">The third caption</p>
        </li>
      </ul>
    </div>

Thanks in advance

Hi,

The ResponsiveSlides plugin has a random option, which you can set to true to randomize the order the slides are shown.
Does that help?

Hi Pullo, Yea it works … thankssssssssss

No probs :slight_smile: