Can I create Netflix’s video carousel with CSS only?
Sometimes it's fun to try and make something with CSS only. It might not be code you'd use in production, but that doesn't mean we can't learn a lot from doing it!
🎓 I'm working on a new course! https://beyondcss.dev/
🔗 Links
✅ The GitHub repo: https://github.com/kevin-powell/netfl...
✅ Kyles video: • Can I Create Netflix’s Video Carousel...
✅ More on :where(): • :where() - Remove the specificity of ...
✅ More videos in this series: • Cloning cool designs with CSS
⌚ Timestamps
00:00 - Introduction
01:21 - What we're starting with
03:22 - Making the general layout for the scroller
10:10 - Adding the arrows
15:24 - Adding the smooth scrolling
16:36 - Stop the arrows from sliding
23:00 - Styling the arrows
27:40 - Making the next/previous behavior work properly
33:56 - Getting the arrow to show when there is no target
35:11 - Fixing the arrows overflowing
37:32 - Showing that there is more content in the carousel
41:52 - The navigation indicators
48:49 - Fixing the button and indicators when nothing is targetted
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - https://code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
