Streaming live at 10am (PST)

How to make a (background) full screen image be replaced by a second after few seconds


I’m new to Webflow. I need some help, hope you can give me this?

What I want is a one-page website with a full screen image in the background (below that, some static items like text and logo’s);
after 3 seconds a second full screen background image covers (or replaces) the first image (with a 500 ms fade in), and again after 3 seconds a third image replaces the second, after 3 a fourth image and again after 3 seconds the very first one fades back in.
It must no be background images, but I will want to place a header and a logo on top that will fade in but stay there.

I’m stuck, although I’ve seen all the instruction videos :slight_smile:

Could you guys please help me? I’m sure all of the rest will be easy compared to this one…

Kind regards

You could try using a slider set to auto. Put it at the bottom of your first fullscreen section (height:100% and body height 100% as well). You’d select the arrows containers and pass them to display:none, same for the elment containing the dots on the bottom. You’d have to edit the height of the Slider element (default is 300px, pass to 100% height).

Other solution requires Interactions: pile up several 100% divs on the back of your fullscreen section, then give each an interaction to affect their opacity in time.

Other solution is googling for a JS. Such a JS could be extremely simple to use, but the 2 first solutions don’t require code at all.

1 Like

EDIT: @vincent answered this far better than myself!

100% agree - the easiest solution is just to use the slider and set arrows etc to display none :smile:

Well thanks, am gonna try your solution tomorrow. I saw this in a template (Contemplate) also after I typed my post so I’ll try this one, keep you posted!