Slider with slides that fade in/out

Hi everyone :slight_smile:

I’m working on a slider and have a couple of issues with it. First, I want the focused slide to be full opacity, with the other slides faded with a reduced opacity. When a user clicks to view the next slide, that should move to the centre and fade in, while the previous slide fades out.

I looked on the Webflow forums and found a past example: How do you make a carousel where the prev/next slides are faded?

I found that topic above and cloned the project, but for the life of me I can’t see what is causing the slides to work like that. Sorry if it’s a noob question, but how is it done?

I made a quick project so you can see what I have so far. It’s far from finished, but here it is: Slider project

The second issue is that I want the slides to infinitely repeat, so that the user can just keep clicking through all the slides. At the moment, it shows a few on screen, you click the next arrow, and it then shows the last slide by itself. It’s a bit clunky and I’d rather the first slide is shown again after the last slide. Is there a way to do that with Webflow’s interactions (or some other way) ?

Thanks!


Here is my public share link: LINK
(how to access public share link)

Some link might help you:

Perfect, thank you so much!

1 Like