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?


Change background image on refresh
Random slide load
Dynamic slider with 5 slides showing in random order. Possible?
Randomize Slides On Page Load
Change background image on refresh

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

Random slideshow feature
Slider random start

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

Choosing randomly an item in a collection

Thanks for taking time to help me :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.

:smile: Waldo


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

How to create full screen news slider

@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!

Slider: Random order image rotation [Solved]

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. :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. :smile:

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




@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!

closed #10

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