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?

Thanks

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: https://webflow.com/website/Changing-Slider?s=changing-slider
Live Site: http://changing-slider.webflow.io/

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

<script>
  $(".mask").append($(".mask").children().sort(function () {
    return Math.random() - 0.5;
}));
</script>

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

Thank you,

Waldo

P.S. More information on how to re-order child elements on load using js: jquery - How to change the order of 3 of 4 divs randomly on page refresh - Stack Overflow

5 Likes

@Waldo:
Hi,
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

2 Likes

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

1 Like

@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!
https://preview.webflow.com/preview/feinberghanson?preview=f03845654f087c0b817b59f1fb0df2ab

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:

<script>
  $(".hero-mask").append($(".hero-mask").children().sort(function () {
    return Math.random() - 0.5;
}));
</script>

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:

Thanks,

Waldo

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.