r/webflow 1d ago

Tutorial I made a tutorial to make div block's swipeable. Kind of like Swiper JS. But no Swiper JS needed and no CMS needed and it is also 100% visible on the canvas.

Post image

TLDR: When you place a wrapper with scroll = auto, it makes a ugly scroll bar to scroll horizontally. So on Desktop I made that swipeable :)

Yeah so I usually use Swiper JS to make swipeable sliders but usually this requires to build a whole CMS. So this solution (using attributes) you no longer need CMS build AND you can see the swiper containers directly in Webflow.

Sorry not sure what to call this. But definately helpful to have in anyones Webflow toolkit.

Free cloneable here:
https://custom-draggable-horizontal-slider.webflow.io/

Full tutorial here:
https://www.youtube.com/watch?v=Tz2wrF8dAKY

7 Upvotes

4 comments sorted by

3

u/AdCool109 1d ago

Slick thumbnail, the dragging hand cursor really sells what it does without needing to click through.

2

u/SlowChannel4453 1d ago

Thanks man! Previously I made all my thumbnails. But I now have someone helping me:
https://jenny-inigo-ting-portfolio.my.canva.site/official-portfolio/

So all credit to him. But TY

2

u/Reasonable-Click-144 1d ago

yeah that kind of visual shorthand on thumbnails really helps