Can I create Netflix’s video carousel with CSS only?

Published: 05 May 2022
on channel: Kevin Powell
110,082
2.8k

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!


Watch video Can I create Netflix’s video carousel with CSS only? online without registration, duration hours minute second in high quality. This video was added by user Kevin Powell 05 May 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 110,082 once and liked it 2.8 thousand people.