Streaming live at 10am (PST)

2nd Slide dropping down to section below


#1

Hi,

I’ve been following the instruction video at https://university.webflow.com/article/sliders 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.

My share link is:Share Link

Any help appreciated.
David


#2

slides shouldn’t use Flexbox. They should be using display:inline;

CloudApp

hope this helps :slight_smile:


#3

Just to add on, avoid overriding the “Display Setting” for complex components like Sliders, Tabs, etc.

If you have to, drop a div inside the component and style that instead.


#4

Hi @PixelGeek,

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?

Pretty much how the instructor in the video (https://university.webflow.com/article/sliders) made his slider look?

Here is the share URL: https://preview.webflow.com/preview/bpmevents2?preview=9aa2cd97eeec598f885ba0318aa8cc27

The site is also live as I was on a deadline but would still like to fix the slider: http://bpmevents.co.nz

Cheers
David


#5

Hi @samliew,

Thanks for the heads up on overriding display settings, I guess you are talking about using height settings like 100% and 100VH on these components?

David


#6

I’m talking about block/inline-block/inline/flex/none.


#7

This topic was automatically closed after 60 days. New replies are no longer allowed.