Streaming live at 10am (PST)

Different slider each time the page loads

I have a client that wishes to have a random image, into a background slider, each time a visitor enters the site.
Instead of always starting on Slider1, every time a visitor comes to the site, the staring background image would be different.

Code ninjas could ou please help?
@bart can you join in and let me know if this is possible?


Any ideas? Anyone?.. I really need to give feedback to the client.

Hey @nita_design

You can use some Javascript to change the order of the child elements displayed within the mask :smile:

Here’s a cloneable project:
Live Site:

Here’s the js to do it. :slight_smile:

  $(".mask").append($(".mask").children().sort(function () {
    return Math.random() - 0.5;

Please let me know if you have any questions. :smile:

Thank you,


P.S. More information on how to re-order child elements on load using js:


Thanks for taking time to help me :slight_smile: I’ll give it a try and let you know.
Now the client wants me to use a mirror frame (from his own pictures) to “frame” a text/content div… But I’ll open another topic for that (just before I pull my hair out) :tired_face:

Haha just let me know if you have any questions.

:slight_smile: Waldo

1 Like

@waldo would this then affect all other sliders on my site?

@waldo so I got this to work, but have realized I don’t want it to be completely random. How would I tweak the code to make the slides refresh in order instead of randomly. Since I’m only using three images it’s strange when the same image comes up twice in a row.

Here is the link to my site. Thanks in advanced!

Hey @melphiz6 this shouldn’t affect other slides on your site if you only target the mask class given to the hero slider, so just give the mask for this slider a different class name, maybe “hero-mask”. That way it will only effect that one, and you’ll need to change the class name within the script used on the example you cloned earlier. :slight_smile:

  $(".hero-mask").append($(".hero-mask").children().sort(function () {
    return Math.random() - 0.5;

As far as making the different slides show up in order based upon page refresh, this would require some caching and cookie techniques which I’m still unfamiliar with. Let me take a deeper look into the techniques used to do this. :slight_smile:

Please let me know if you have any questions or need any additional help implementing this. :slight_smile:



1 Like

@waldo thanks that works. None of my other slides are affected. Any insight you can find into making the images show up in sequential order would be great. I appreciate it!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.