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

Published: 30 May 2022
on channel: Steve (Builder.io)

23,257

755

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: https://developer.mozilla.org/en-US/d...
- Browser support: https://caniuse.com/?search=scroll-snap
- Try it out yourself: https://jsfiddle.net/L1cs6gt5/1/
- Try a more complex example using JS to programmatically scroll https://jsfiddle.net/L1cs6gt5/3/

Watch video How do Nike and Apple make such smooth and touch friendly carousels with pure CSS? online without registration, duration hours minute second in high quality. This video was added by user Steve (Builder.io) 30 May 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 23,257 once and liked it 755 people.

47,808

104