How to create a rotating header

Design help General
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

1 Like
2

Hi grieea,

Inspecting the source code, it looks like this effect was achieved using Javascipt. Googling the JS script name reveals this: JavaScript DOM: Display a random image by clicking on a button - w3resource

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

1 Like
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 > Random image on reload - Webflow

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:

1 Like