Streaming live at 10am (PST)

Different slider each time the page loads


#1

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


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

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


Random slideshow feature
Slider random start
#3

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. :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: http://stackoverflow.com/questions/27893507/how-to-change-the-order-of-3-of-4-divs-randomly-on-page-refresh


Choosing randomly an item in a collection
#4

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


#5

Haha just let me know if you have any questions.

:smile: Waldo


#6

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


How to create full screen news slider
#7

@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


Slider: Random order image rotation [Solved]
#8

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:

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

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

Thanks,

Waldo


#9

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


#10

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