Streaming live at 10am (PST)

How to create a rotating header


#1

Hi all, I’m trying to create a rotating banner on my website so that every time the page reloads, a new hero image appears, kind of like what’s happening here, but with the full background image.

So far I’ve been able to use a CMS list limited to 1 image that randomly shuffles so it shows a different image from the collection everytime, but when the page is stretched wider than the image it will start to distort if I also limit the height. This also has the downside that it doesn’t really stay intact when the browser is narrowed, but I haven’t gotten to editing the other breakpoints for mobile devices yet.

So far solutions would seem to be either to get the image to constrain proportions within the section it’s in- maybe somebody has some ideas?- or to use the section background image, with the downside of the latter being that I lose the feature of the rotating header.

Thanks in advance!


Here is my site Read-Only: LINK


#2

Hi grieea,

Inspecting the source code, it looks like this effect was achieved using Javascipt. Googling the JS script name reveals this: https://www.w3resource.com/javascript-exercises/javascript-dom-exercise-11.php

Wish I could help more insofar as to how webflow can create this effect natively! Hope this provides some direction.


#3

Hello @grieea

After a quick Google search I’ve found something that works. See live here > https://random-image-on-reload.webflow.io/

Clone and explore here > https://webflow.com/website/Random-image-on-reload

The only problem I have is that you need to use an image element. I’m still searching for the background solution. I’m not a code master so yea :sweat_smile: Btw there’s a CSS code you can use to make an image element act as a background.

How the structure works:

1. A div with a class > section > 100vh or whatever you want

2. Image element inside with ID randomImage

3. Script before the closing body tag

Here’s the script

<script>

function getRandomImage() {
var images = ['urloftheimagehere', 'urloftheimagehere', 'urloftheimagehere'];
var image = images[Math.floor(Math.random()*images.length)];
 
return image;
}
 
function displayRandomImage() {
var htmlImage = document.getElementById("randomImage");
htmlImage.src = getRandomImage();
}
displayRandomImage();

</script>

If you have more questions feel free to reach out.

Piter :webflow_heart:


#4

Interesting too!!! I have same issue