Slider - Background Overlay for Slide not in view

Design help General
1

Hello.

I need some help with my slider.

I have manged to get 3 slides in view, as per the design.

image
image1432×741 90.7 KB

Firstly, I want to remove the left arrow when the page loads, as we are at the beginning of the slider.

Secondly, I want to apply an overlay to the 4th slide, which will be the slide not in view:

image
image1445×741 243 KB

I have added a div to illustrate what I want, but when the slider is used, the div shouldn’t move, it should stay perfectly over the 4th slide (not in view).

Any help is appreciated. Thanks.

Preview:

Read-only:

2

Hi there,

To hide the left arrow in your slider, follow these steps:

  1. Select the left arrow element in the Navigator
  2. Open the Style panel
  3. Set the Display property to None

Your implementation of multiple slides view with 33.33% width for desktop and 100% for mobile is correct - this will ensure proper display across different devices.

Regarding the overlay for the 4th slide, maintaining a fixed overlay on slides that are not currently in view isn’t a standard functionality in Webflow’s slider component. You might want to consider alternative approaches, such as adding individual overlays to each slide or implementing a custom solution using interactions.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Thanks for the reply.

Regarding the left arrow. I still want it to appear when the slider has moved across to slide 5 for example. I don’t want it hidden completely. Does that make sense?