Streaming live at 10am (PST)

Has anyone created a slider (vertical) using TRIGGERS?


#1

Hello everyone!

I need a slider, and a very unusual one. It’s not just “moving pictures” - it’s the structure of the page. And so the usual element of “slider” does not suit me. To be honest: it’s terrible (sorry webflow). I would like to create a slider the way I need it. That is, using triggers. Tell me is it possible? What triggers should I use? How to do?

And please don’t tell me that it’s impossible to create a slider with triggers. That would be terrible news…


I forgot to say something important: a slider that scrolls by scrolling the mouse wheel. DO NOT TOUCH! Scroll the mouse wheel. Is it possible to implement this in webflow? Use interactions 2.0 (new). Let’s forget about the old.


#2

Its really hard to help you. Do you have any reference? (codepen or Site).

You talk about this trick?

-or- her you have a lot of examples:
http://idangero.us/swiper/demos/
-or her-

Share the one is ± close to your idea


#3

Hello, @Siton_Systems !

I’m talking about something like this: https://varagon.com/


#4

Yes this is all possible. You would need to set your divs to 100vh to get it to fill the screen and then use page trigger affect. so that when you are scrolling you get the similar effect. To be honest, it would be a lot of trial and error, but doable.

It is not a slider, but a transition effect between divs.


#5

Hey, @BluBerry_Media

I knew it wasn’t a slider, but I didn’t know how to describe it. Thank you very much, I will try it later :wink:


#6

@BluBerry_Media Still, I am sure that in the future I will have to create sliders. And I’d like to ask you if this can be done with webflow interactions (without third-party code)?


#7

Yes. The backgrounds of each div is probably a 2-3 image slider with 100 or 90vh setup for them. That way they fit within the 100vh parent div. You just have padding setup for the interactions menu when you scroll over each section.

I don’t see any need for 3rd party code.


#8

@BluBerry_Media Thanks so much. In theory, I understand everything, but practice is needed. Then I’ll go practice and try. And the transition between sections try to do. Thank you again :metal:


#9

You r very welcome.

Go have fun!


#10

hello :slight_smile:

I’m on the same way, I need to reproduce this effect: https://fueled.com/ (scroll to the 3rd section in home )

i have 3/4 div that each one overlap the previeous scrolled div.

How can I achieve this goal? div2 that overlap div1 in the way that fueld.com do?

Thanks in advice!


#12

@BluBerry_Media You were right. It was very easy to do. But you’d be wrong. No need to use page trigger, then (slider) will not scroll up, only down. You must use the “scroll into view” trigger for each Div separately. And it will!) Once again I am convinced that Webflow is an extremely powerful tool. Thanks again!


#13

hi @lebonWeb

If I understand you correctly, it is enough to put a higher z-index for the subsequent section. For example, the first section has z index 0 and the second has 2. Respectively have 3 of z-index equals 3 or 4


#14

@Bogette I am glad I could help. Happy to see it all worked out.