Project 57, Website sections
Testimonial Carousel
Show what customers say with a review slider that fits any width. It uses native scroll snapping, so it feels right on phones.
- Main API
- ResizeObserver
- Scrolling
- CSS scroll snap
- Dependencies
- None
- Your browser
- Checking
Customer reviews
Swipe or scroll the cards, use the arrows or dots. Resize the window: the carousel shows 1, 2 or 3 cards.
How it works
- Let CSS do the scrollingThe rail uses scroll snap, so swiping on a phone lands neatly on a card with no custom touch code.
- Measure the spaceResizeObserver watches the rail. Wide shows 3 cards, medium 2 and narrow 1, and the dots update to match.
- Autoplay with a ringA progress ring shows time to the next page. It pauses on hover, focus, the Pause button and reduced motion.
.rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.card { flex: 0 0 var(--w); scroll-snap-align: start; }
new ResizeObserver(() => {
const w = rail.clientWidth;
perView = w > 900 ? 3 : w > 560 ? 2 : 1;
rail.style.setProperty("--w", `calc((100% - ${(perView - 1) * 16}px) / ${perView})`);
}).observe(rail);