I’ve been following the instruction video at Slider | Webflow University and have come up against a couple of issues.
I placed a slider with a class of “Functions Slider” between two sections, no container so it is full width. I’ve used a background image which is set to contain with auto width and 100VH height as per the video example. I’ve also added a container set to flex with a heading, paragraph and button again the same is in the video.
The first slide works OK but even though I set the background of the left and right arrows to transparent it remains grey. I don’t need to change the colour of the arrows, white is fine, but I do need the arrow backgrounds to be transparent or black as a fallback colour.
The other issue is when I add a background image to the second slide it drops down the page and sits behind the lower sections. Unfortunately the video does not go into adding additional slides so I may have done it the wrong way. I added them using the “add Slide” in the settings section and have given each slide a unique class name.
Thanks for your input, I guess the video is out of date and maybe should be replaced?
If you have a look at the video around 2:39 the instructor is setting a slide to 100VH and around 3min 10 sec he is setting a slide to use flex?
I’ve managed to get the slider to work full width but due to the slide image ratio (16:9) a section of the grey mask shows up between slides. I get around it by setting the background image to cover but that introduces other issues.
Can you let me know or point me to an up to date video/tutorial that explains how to create a full width slider with background images overlaid with other content (text, buttons etc) that can be centered (vertically and horizontally) over the slides while retaining the slide nav dots and arrows natural positions?
