Streaming live at 10am (PST)

Unique slider layout?

Hi @daniel_cleayweb and @sabanna, not sure if you’re still active on here, but I am looking to make this sort of slider-carousel as well. I might need a more remedial lesson… do you know of any tutorials that help lay out the process from step 1?

For instance I tried step two Make mask overflow: visible, width: 60% and center it (in display settings) and got the following message:
03|572x296

Hi, @Tombo!

You screenshot shows DISPLAY settings. The OVERFLOW settings located in a different section of the Style Tab

1 Like

Hello!
Thanks @sabanna for this awesome walk through! I am having one issue however and was hopeful that you could help me out. When I attempt to follow the steps everything goes fine until I loop the last slide, when I position the last slide to absolute: right it shoots the image all the way to the left and lines it up with slide 2 for some reason. Any ideas?

Any idea, why the “extra images” aren’t aligned?

Here’s my read only

Special thanks to
@sabanna @Waldo

Hi, @Zuni!

It’s all about math/geometry. When you are moving “extra image”, you are positioning it relatively to the slide edge. Since your image is 70% of slide width and centered, which is 15% on each side, you need to move the image not on 101% left or right but 70+15=85%. Then extra images will be in the right position.

1 Like

Dear @sabanna, thanks for your fast answer, which totally makes sense :pray: I appreciate the infographic :smile:

1 Like

Hi Sabanna, I would like to see how it looks like but the link you provided for your example seems broken ;(

Hi, @lomse that was old customer’s site. They moved it to the other domain and changed the slider layout.

I have a couple of other examples, including the one I am using in the tutorial that I am writing now

https://multicolumn-one-step-slider.webflow.io/
https://one-step-slider-example.webflow.io/

1 Like

Thanks @sabanna. You are the best!

@sabanna your answer was perfect. Thanks for that. My new issue appears when i want to make the left and the right photos smaller and to have more transparency. I’m using legacy interactions (when slide into view, but the extra image is into view…).

Here is my read only

Where m i wrong? :weary: Thanks

Hi, @Constantin_Robert!

I would strongly recommend rebuild your interactions in the new version.

@sabanna done :grin:

All you slides/photos needs to be the same size (width) , otherwise it will not work properly, but you can add interactions that will scale the slide content down when slide is Out of view and scale back up when it is In to view. Also, you can add opacity change.

you can add interactions that will scale the slide content down when slide is Out of view and scale back up when it is In to view

@sabanna
Well, this makes sense, but there is a big BUT. Assuming you’re working on the first slide (it’s In to view), you have the main image and the extra one. If i add an interaction here, both of them will be in to view in the same time…so the interaction for Out of view won’t have effect for the extra image, even i’ll apply the interaction.

Right, you just add extra actions into interaction. See in this example:
https://preview.webflow.com/preview/multicolumn-one-step-slider?utm_medium=preview_link&utm_source=designer&utm_content=multicolumn-one-step-slider&preview=5ee353452aff45e78794bef4a33f3cef&mode=preview

Image 2020-03-20 at 5.54.23 PM Image 2020-03-20 at 5.54.43 PM

1 Like

Thank you very much you helped me a lot already!! Just have one question how can I implement those arrows with the changing numbers in the slider?

Hi, @Felix_O

I didn’t implement this kind of slider navigation, but theoretically, you could set stack of numbers on top of each other (like layers) and make them appear-disappear based on slide in-view/out-of-view

Thank you for your answer! Hmm ok and how can I make elements dissapear/appear on different slides?

By using interaction with trigger Slider change
Image 2020-03-30 at 12.31.04 PM

1 Like

Ah thats genius :slight_smile: Will try it out. Thank you!

1 Like