Create a horizontal media scroller with CSS

Horizontal scrolling components are becoming more and more common, so let's look at the CSS behind them!


🔗 Links


⌚ Timestamps
00:00 - Introduction
01:25 - The HTML and what we're starting with
02:51 - Creating the horizontal scrolling component
08:42 - Styling the individual items
12:09 - Improved locally scoped custom props
15:21 - Adding scroll snapping
20:43 - Making scroll groups

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

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.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[mohammadabujaradeh]

To be honest I am not fan of css but after following you for almost a year your are changing my thoughts on css and how enjoyable can be working on it , your videos ( not matter the topic ) is clear, easy to understand and supported with great examples . Well done Kevin. And same as everyone looking forward for open props too

[the-suspect]

I want you to teach everything, seriously. Your teaching style is so good and easy to follow.

[piyusharyaprakash]

Man love this tutorial, the fact that you explain what a particular css property does is amazing. Always needed someone to help me understand what a property actually does. I'll be visiting your channel every now and then for these css tips!

[ayitinya]

You literally just read my mind. Been looking for a tutorial like this. Much appreciation sir

[remkospaans]

Hadn't heard of Open props before, so yes, more explanation would be welcome. Thank you very much Kevin.

[sidharthanand]

Wow. I was already working on creating a horizontal layout and was completely frustrated at not being able to create the way I thought. Thanks to Kevin for creating this video 👍

[Pvko_BeatBrewer]

Yes please! I would gladly dive into watching video about open properties as well! Looks so helpful to boost creativity on projects!

[williamogburn]

I've been coding for a little over six weeks now and your videos have really helped me stay encouraged. Thanks, Kevin!

[shinovar]

This is crazy i was googling like crazy for a good video on this and I cant believe you ended up posting one right away the next day. I LOVE !!

[atrus]

I always learn something new on this channel! I didn't know CSS supported snapping or that overflow scroll behaviour thing, which is handy.

For the spacing not being related to the .snaps-inline class. What I always do in these cases is use the multiple class selector, e.g., .media-scroller.snaps-inline and put the property on that. This way, .snaps-inline can be reused and have specific padding (or no padding) for other types of elements. The snap padding also isn't mucking up the .media-scroller. It only applies where both classes are used.

PS: I once made an HTML/CSS-only scroller/carousel (more like Netflix with prev/next buttons) with radio buttons and old school HTML/CSS. I used hidden radio buttons before each slide (2 before first slide and none before last slide... explained later) and used labels for the slides that pointed to the radio button before the previous slide. When you clicked on a slide, the before the previous slide would become selected. This way, I could use the :checked + .slide selector to select the previous slide, :checked + .slide + * + .slide to select the current slide, and :checked + .slide + * + .slide + * + .slide to select the next slide. Because each slide was a label, clicking the slide itself took you to that slide, so to have prev and next buttons, I simply had a bit of the previous and next slides showing before and after (respectively) the current slide. I would post the CodePen, but I don't want this comment flagged.

[joshfriedman]

Would love to see a video on open props. This is the first I'm hearing of it but definitely something that seems worth exploring!!

[tedsemon]

Wonderful video Kevin, I learned a lot. You explain things very clearly, not only to show us how to do something but telling us why we might want to do something too.

[Rico-cpxp]

Open props seems like a game changer when it comes to quick prototyping. Would love to see a video on it!

[kristianulvund]

This is giving me tears of joy at the moment. Thanks, Kevin🤩

[joelhodes]

I was wondering just this morning how to implement snap horizontal scrolling. You’ve saved me a couple of hours work. Perfect timing!

[drewnorman]

Nice work KP. Your tutorials make grid less scary. May the force be with you

[JeremyChone]

So good. We have been doing grid for years, but still learn from your videos. Top content for any web app dev.

[cesarimura]

Oh my god, was looking for it yesterday, you are the man Kevin, thank you so so much!

[thecoderabbi]

I will definitely try this out when I can. Love you Kevin!

[merko]

I always learn something new when I watch your videos. Thank you and keep it up! :)