Streaming live at 10am (PST)

Need help with slider positioning and interactions

#1

Hello I’m new to webflow and I’m having difficulty with the slider. What I’m trying to achieve is to have an overlaying description box on top of a slider that animates with the background image. I finally got the first slider to work with the overlaying box where I set the position to relative and changed the z index. But the problem comes when I tried to add additional slides then the additional slides drops below the first and I can’t seem to figure out why. I’ve spent about a week working on this slider and I’m running out of time and patience. Can someone please help me resolve this? I think I’m very close. here’s the link to the site:

https://preview.webflow.com/preview/beatwebsite?utm_source=beatwebsite&preview=70bf1cf8b0d92c5a3755f74aaaabe6a6


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

Hey @joony422

first of all, congratulations for pulling this website, it’s clean and beautiful.
About the Slider, it’s a bit tricky to create one with custom interactions within the Webflow Designer, but it’s doable.

What you need to do is select a slide, in your case .the-slide and give it an interaction with Element trigger: Slider and select Class on the bottom. That way you can set both Slider in view and Slider out of View in one place for any number of slides you want.

#3

The tip above is if you want the box to change.

But if all that you want is to keep the same box overlaying every slide, you need to get it out of the slide itself, and give it a position: absolute to position it on top of the slider.

Let me know what you are wanting to achieve so I can help you.

#4

Thank you Gilson for the help. I believe I have tried those but I have problem with swapping the text out from the overlaying box as the bg images alternate (Check the attach image).

Do I have to still pull the box out still and add interactions to the parent slider (slider3?) Think I’m stuck maybe been stuck for couple weeks now. I’m not sure what I’m doing wrong.

#5

Hey Gilson were you able to checkout the image attachment? My problem is that the other slides keeps moving down. Not sure why that is

#6

#7

Hi I was able to seperate the overlaying box but now I have trouble adding interactions to the box since it doesn’t belong in the same class. How would this work? here’s the latest link:

https://preview.webflow.com/preview/beatwebsite?utm_source=beatwebsite&preview=70bf1cf8b0d92c5a3755f74aaaabe6a6

#8

sorry @gilson think i forgot to tag you. let me know if you can help me execute this. thank you

#9

@gilson Hi is there any way you can still help me? I’m still stuck with this slider. thank you