How do Nike and Apple make such smooth and touch friendly carousels with pure CSS?

The scroll-snap property in CSS gives you amazingly smooth and performant scroll snapping for both desktop and mobile browsers. Combine that with element.scrollIntoView() in JS and you have a complete and fully functional carousel that is wonderfully smooth and simple
- Learn more about scroll snap: developer.mozi...
- Browser support: caniuse.com/?s...
- Try it out yourself: jsfiddle.net/L...
- Try a more complex example using JS to programmatically scroll jsfiddle.net/L...

[@dailymeow3283]

Does it need display: flex and overflow-x: scroll on the slides container ?

[@Steve8708]

Correct! You can see a full code example here jsfiddle.net/L1cs6gt5/1/

[@xi_red4936]

Never thought making responsive scrollable cards would turn out to be that easy. Thank you so much for this useful tip.

[@jisrite]

I know!! I thought this was going to be a big step for me, then i see this video

[@auctifer0]

This is so awesome, can't wait to try it out 💯

[@trickster6254]

Could you please add an example of how to add the next and previous buttons to the jsFiddle? I'm struggling to get that implemented. Amazing video though!

[@aaronflorespezantes7051]

please

[@bread_loaf8]

I love this. Very helpful. Is there a way to make them rotate automatically like the carousel in Bootstrap? Like it would be nice to have them loop through the images automatically while also giving the option to click on the dots to go back to a image the user wants to look at again

[@Ro_V_oR]

Thanks so much the scroll-padding was just what I needed

[@chetansidhu]

I was wondering if there is any way to get rid of the horizontal scroll bar?

[@user-qr3hz3vu8g]

You can using this: /* Hide scrollbar for Chrome, Safari and Opera */ .carousel::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .carousel { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }

[@FelipeBlanco]

Tiktok brought me here. Thanks.

[@felp4638]

Has anyone had any issues with using scroll into view and hijacking the page scroll?

[@praveenstakez]

Oh. That's what the backend is

[@haizk]

wow great

[@Aziz-kw6ct]

Fascinating

[@anonymushadow282]

esta obsoleto?

[@hinoki.mp4173]

no, although I don't find it very useful on desktop. Ok it's smooth and snappy on mobile, but you still need to implement in some way the next and prev button on a non-mobile view

[@anonymushadow282]

@@hinoki.mp4173 thanks, i was searching but it didnt work