Streaming live at 10am (PST)

Carousel Slider Moving One Image at a Time

Hi,

Wonder if anyone could help me a client as ask me to create a carousel slider that consists of 3 on each slide and moves one image at a time rather each slide, the same as the slider on this website:

https://www.mokarico.com/it/shop.html

I’ve tried to work it out myself and couldn’t. I have looked on webflow university and online tutorials on how to do this and haven’t found an answer if some could shed some light on how to do you would be a life saver!

Thank you!


Here is how to take control of the Slider.

You can resize the Mask element so that it doesn’t take up the whole slider. And you have to remove the overflow:hidden property of it, so that the other slides are visible. Add overflow:hidden on the slider element.

Here is the demo: https://sbx.webflow.io/slider-anaotmy

Here is the sharing link so that you can check how it’s done. I’m using Flexbox to position the Mask: https://preview.webflow.com/preview/sbx?utm_medium=preview_link&utm_source=designer&utm_content=sbx&preview=3ec033cabc671d9aed325632b7d7daa3&pageId=5d74d57dfc69ff5a94dcef60&mode=preview

Thanks for this vincent, much appreciated!

One more question.

How do you add overflow:hidden on the slider element?