Slider
Swiper Bullets
Bullet pagination indicator for sliders.
Overview
SwiperBullets displays bullet indicators for slider position and lets users jump to a specific slide. It pairs with any swiper-driven component (hero, product, or content slider) and reads state via useSwiperEdgeState. Bullet styling is surface-tone aware so the indicators read on light, dark, and bright backdrops.
Key Business & UX Benefits
- Familiar bullet indicators tell shoppers how much more content is in the slider, reducing the rate at which they miss later slides.
- Direct-jump behaviour lets visitors land on the slide that matches their interest, raising click-through on hero rotations.
- Surface-tone aware styling keeps the bullets legible on any backdrop, so designers freely match the slider to its page.
- One indicator component covers hero, product, and content sliders, keeping the rotation pattern consistent across the site.
Usage
LSwiperBullets
Feature List
- Bullet indicators show slider position and let users jump directly to a specific slide
- Reads state via useSwiperEdgeState so any swiper-driven component picks up the indicators
- Direct-jump behaviour helps visitors land on the slide that matches their interest
- Surface-tone-aware styling reads on light, dark, and bright backdrops
- Pairs with hero, product, and content sliders for a consistent rotation pattern across the site