Streaming live at 10am (PST)

Change background image on refresh


#1

Is it possible to change a background image when a user refreshes the page?


[Tutorial] How to add a Background Video
#2

What do you mean? Can you explain a little bit more?


#3
$(document).ready(function() {
  var images = [ 'image1.png', 'image2.png', image3.png' ];
  var random = 1 + Math.floor(Math.random() * images.length);

  $('.slider-class').html('<img src="' + images[random] + '" />');
});

That should do the work.


#4

@thesergie what I mean is to display a random header or background image on each new pageview!


#5

Thanks @bartekkustra, where exactly do I incorporate that code into webflow?


#6

@LaurentCardinal you can go to your page settings, and go to the Custom Code tab. That's where you would paste in this code.

@bartekkustra I don't think she meant using the slider, but just changing a background image randomly. I think you specified how to do this for an image.


#7

Thanks @thesergie. Ill try to find some code on Stackoverflow that will work in webflow. BTW im a guy wink


#8

@LaurentCardinal Oh shoot sorry about that!


#9

I'd like to do this as well! Is there an easy way to do this on Webflow yet? (I'm not very code-savvy)


#10

I would also love to know how to do this in webflow if anyone has found a solution!


#11

Can someone better clarify how you might go about doing this. I see the code above, but am not sure where I would place my images. Also it looks like it's using a slider class and I don't want this to be a slider but to simply change out an image on refresh.


#12

Hey @melphiz6 you could use a slider and set it to display in the background (100vw for width, 100vh for height) and then apply the technique used here with Autoplay on the slider turned off (just delete the arrows & the nodes to change slides).

This should achieve the desired effect. :smile: Please let me know if you have any questions.

Thank you!

Waldo


Unable to implement a random slide upon refresh using code
#13

A post was merged into an existing topic: Different slider each time the page loads


#14