Scroll snapping without a carousel library
Carousels used to mean Slick, Swiper, or custom scroll math. CSS scroll snap gives you card-by-card or full-width snapping with a few properties.
2 scroll-snap-type: x mandatory;
3 overflow-x: auto;
4 display: flex; gap: 1rem;
5}
6.carousel > * { scroll-snap-align: start; }
2import Swiper from 'swiper';
3new Swiper('.carousel', {
4 slidesPerView: 1.2,
5 spaceBetween: 16,
6 scrollbar: { el: '.swiper-scrollbar' },
7 touchEventsTarget: 'container'
8});
Browser Support for Scroll snap
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Your first month is free
Managed WordPress hosting for faster sites.
No library
No Slick, Swiper, or custom scroll math. Just CSS on a scroll container.
Native touch
Touch and trackpad scrolling work out of the box. No touchstart handlers.
Accessible
Real overflow scroll, so keyboard and screen readers get normal scroll behavior.
How it works
Carousels were usually built with a JS library that handled scroll position, touch events, and snap calculations. You paid in bundle size and maintenance.
scroll-snap-type: x mandatory on a scroll container plus scroll-snap-align: start (or center) on each item gives you snapping. Use overflow-x: auto and flex/grid for the layout. No JS.