Streaming live at 10am (PST)

Changing hero backgrounds on slide transition


#1

Hi, first post so be gentle.

I've searched for an answer but nothing seems to fit the bill. I want to have a full screen background hero image change as slides in a slider change, either automatically or when the navbar is clicked. I have no problems creating a slider that sits in front of the background image, I can even sit a slider in front of another slider, but making the background transition at the same time as the slider image seems more complicated than I think it should be.

I want the slider image and the background image to be separate so combining the 2 into a single image isn't an option. I could use a slider or click trigger and make individual backgrounds "appear" but that seems complex. Essentially, I want to change 2 slides, in different sliders, at the same time. Any thoughts?

I'm going to use tabs for now but really wanted only one "foreground" image to be the focus.

Thanks for any feedback. :O)
Martin.


#2

@ookidevtest,
Welcome to Webflow!

The simplest way I can think of would be to set up a slider that is full screen (or full width) to display the background images. Then you can use slider interactions to drive the transitions for the smaller set of images. You can relocate the slider navigation elements to align to the smaller images if you prefer.

Not exceptionally difficult once you have a little familiarity with Webflow, but may not be the easiest starter project if you are brand new to it. The interaction should be completely reusable from slide to slide if the smaller images are inside the boundary of the slider. If the smaller images are outside the bounds of the slider you may have to dupe the interactions for each instance so you will be able to target the external image by class name.

Good luck!


#3

Hi vlogic, thanks for the welcome and the suggested approach.

I am new to Webflow and to website design / development in general. I'll review the tutorials and see how I go. If I am successful I'll respond here and make the website public.

Here's hoping!


#4