a slider from scratch [Webflow CMS, GSAP]

Make a beautiful and responsive fullscreen slider (carousel) with a Webflow CMS Collection using some Javascript fundamentals! Typically, people either reach for third party libraries or Twitter fingers when trying to construct a CMS-based slider in Webflow. In this video, we will explore a custom-built solution with Javascript. Great for showcasing work or a gallery of sometime. We'll bring lots of cool concepts to bear here: the dvh unit for responsive full screen design, some custom CSS, position absolute and fixed, object oriented programming, and everyone's favorite - GSAP!
👯‍♀️ Clone it:
try.webflow.co...
// GSAP Discount
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativeco...
// FREE resources
✂️ Code Snippet Library: code-snippets-...
🤝 CSS Nobody Told You About: www.webbae.net...
🚗 Roadmap to learn Webflow: www.webbae.net...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net...
// Connect
🙋‍♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae

[@Split-ob7ln]

3:46 I’m probably nitpicking, but I learned today that if you set the type to module on this script tag, then there's no need to write "defer" as it’s already set to defer. Thought I'd share this with you.

[@webbae]

You're exactly right! Pinning. Thanks for pointing that out.

[@sung-dukkang7488]

Thanks for another great tutorial! Just a quick note, you forgot set the page-wrapper overflow to "clip" to prevent horizontal scrolling when the slides animate.

[@webbae]

Thank You! Published the fix just now.

[@dickyjiang]

I was hoping you’re going to teach how to complain on twitter part 😢

[@webbae]

You’ll have to ask @mattmakerevans to help you with that one 😝

[@dickyjiang]

😅

[@heatherliu6856]

Swipe right