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

แชร์
ฝัง
  • เผยแพร่เมื่อ 16 ก.ค. 2024
  • 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! beyondcss.dev/
    🔗 Links
    ✅ The GitHub repo: github.com/kevin-powell/netfl...
    ✅ Kyles video: • Can I Create Netflix’s...
    ✅ More on :where(): • :where() - Remove the ...
    ✅ More videos in this series: • Cloning cool designs w...
    ⌚ 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
    ✉ www.kevinpowell.co/newsletter
    Come hang out with me live every Monday on Twitch!
    📺 / kevinpowellcss
    ---
    Help support my channel
    👨‍🎓 Get a course: www.kevinpowell.co/courses
    👕 Buy a shirt: teespring.com/stores/making-t...
    💖 Support me on Patreon: / kevinpowell
    ---
    My editor: VS Code - 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 TH-cam channel, make sure to follow me on Instagram and Twitter.
    Twitter: / kevinjpowell
    Codepen: codepen.io/kevinpowell/
    Github: 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!

ความคิดเห็น • 147