🧲 Magnetic Carousel with Tailwind 3 & Svelte 🎠
Let's celebrate the release of Tailwind 3 by creating a Carousel component from scratch... in Svelte!
Carousels used to be one of those things that look cool, but were extremely tough to do correctly, and may not have been that great an idea from an accessibility and user flow point of view...
Today, they're much easier to do better, and which optionally no javascript! Let's spend 10 minutes having fun making one 🙌
Swipe in the app we end up with: https://svelte-carousel-alpha.vercel....
See the code: https://github.com/jmagrippis/svelte-...
Highlighted software:
Tailwind 3: https://tailwindcss.com/blog/tailwind...
Official overview of everything new Tailwind 3: • What's new in Tailwind CSS v3.0?
SvelteKit: https://kit.svelte.dev/
🎶 "Titan" by Lupus Nocte and "Soft Peach" by Sven Lindvall for the background music 🎶
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
My own website: https://magrippis.com/
--
TIMESTAMPS
--
0:00 - Magical Magnetic Carousels with Tailwind!
0:33 - Rendering a list of images
1:29 - Styling into a Carousel
2:07 - "Magnetic" Carousel!
2:38 - Force-centring with pseudo-elements
3:12 - Nav / Controlled Scrolling
5:13 - Accounting for `prefers-reduced-motion`
6:38 - Passing in whole Components
8:55 - 🎠 Final demo! 🎠
9:45 - Next steps + comment & subscribe 🧡