A custom carousel to slide content horizontally — without an external library, with smooth scroll snap. Handy for featured items, logos or photos.
Reach for Swiper when a set of items — logos, testimonials, product photos, featured articles — should sit in a single horizontal row without stacking vertically and taking up the whole page. Because it uses native scroll snap rather than a heavy carousel library, it stays lightweight and responds to touch gestures on mobile without extra configuration.
A common example is a client-logo strip below a Hero, or a row of featured products that would otherwise need a grid with pagination. For a full-screen slide-by-slide gallery with thumbnails and zoom instead, use ImageGallery.
Typical use cases
A webshop often uses Swiper for a 'recently viewed' or 'related products' row beneath the main product content — a horizontal strip that doesn't compete for space with the primary content above it. A portfolio or agency site commonly uses it for a client-logo or awards strip, several logos side by side that would otherwise force an oddly wide, non-wrapping row. For professional services, a testimonial carousel is the classic fit: one quote per slide, swiped or auto-advanced, taking far less vertical space than stacking every testimonial in a column.
Common mistakes and fit
Swiper works best for content a visitor browses casually, not content meant to be followed in a specific order — for a numbered process or workflow, GsapScrollSteps communicates sequence far more clearly than a carousel, which implies 'skip around freely'. Keep individual slides light: a slide packed with several paragraphs of text turns a quick flick gesture into an awkward scroll-within-a-scroll. Give slides a consistent width too — uneven slide sizes make the scroll-snap points feel inconsistent, which reads as a bug rather than a deliberate rhythm.
When slides come from a data type rather than being hand-written — testimonials or product highlights, for example — loop them from a Records block instead of hardcoding each item, so a new testimonial appears automatically.
Because it relies on native CSS scroll-snap rather than a JavaScript carousel library, Swiper inherits keyboard and touch scrolling behaviour the browser already handles correctly, without the extra script weight or the accessibility gaps that custom carousel implementations often introduce.
<Swiper> <Box>Slide 1</Box> <Box>Slide 2</Box> </Swiper>