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.
Code Comparison
✕ Old
12+ lines
1// carousel.js + Slick/Swiper
2import Swiper from 'swiper';
3new Swiper('.carousel', {
4 slidesPerView: 1.2,
5 spaceBetween: 16,
6 scrollbar: { el: '.swiper-scrollbar' },
7 touchEventsTarget: 'container'
8});
2import Swiper from 'swiper';
3new Swiper('.carousel', {
4 slidesPerView: 1.2,
5 spaceBetween: 16,
6 scrollbar: { el: '.swiper-scrollbar' },
7 touchEventsTarget: 'container'
8});
✓ Modern
6 lines
1.carousel {
2 scroll-snap-type: x mandatory;
3 overflow-x: auto;
4 display: flex; gap: 1rem;
5}
6.carousel > * { scroll-snap-align: start; }
2 scroll-snap-type: x mandatory;
3 overflow-x: auto;
4 display: flex; gap: 1rem;
5}
6.carousel > * { scroll-snap-align: start; }
Why the modern way wins
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.
Browser Support
96%
Lines Saved
12+ → 6
No JS dependency
Old Approach
JS carousel lib
Slick, Swiper, touch handlers
Modern Approach
scroll-snap CSS
Native snapping
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.