TL;DR:
.carousel {
display: flex;
overflow: auto;
scroll-snap-type: x mandatory; /* <- the important piece */
}
.carousel .item {
flex-shrink: 0;
scroll-snap-align: start; /* <- the other important piece */
}
- Learn more about scroll snap: [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Scroll\_Snap](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap)
- Browser support: [https://caniuse.com/?search=scroll-snap](https://caniuse.com/?search=scroll%20snap)
- Try it out with a full code example in jsfiddle: [https://jsfiddle.net/L1cs6gt5/1/](https://jsfiddle.net/L1cs6gt5/1/)
- More complete example using scrollIntoView(): [https://jsfiddle.net/L1cs6gt5/3/](https://jsfiddle.net/L1cs6gt5/3/) and [https://jsfiddle.net/54fy6Lo2/](https://jsfiddle.net/54fy6Lo2/)
Few extra notes:
1. You probably want to also add `block: 'nearest'` when using scrollIntoView() so the page doesn't scroll vertically too (unless the carousel is partly offscreen). Here is an example of that: https://jsfiddle.net/54fy6Lo2/
2. For an even more complete carousel with all functionality like highlighting dots on scroll, you'll want to add a bit of JS. I'd recommend using `IntersectionObserver()` instead of scroll listeners when possible for that for best perf
3. Please forgive that my apple example in the video is not super smooth, it's far smoother in real life for me (esp on mobile), just when I do screen recording my whole desktop gets really slow and jittery. I do think they have JS interplaying with it that makes it a bit slow tho, so Nike imo is the ideal example of smoothness and elegance of the two (but I still like showing that Apple uses the same technique even tho w/ a little added baggage)
Any other thoughts/feedback? Lmk and I'll update in the notes here ^
https://reddit.com/r/webdev/comments/v1rjlk/how_do_nike_and_apple_make_such_smooth_and_touch/iao0lio?context=3