Slider
Swiper Numbers
Slider position indicator showing current slide and total count (e.g. "1 / 5").
Overview
SwiperNumbers displays the current slide number and total count (e.g. 1 / 5) for sliders and carousels. Reach for it on hero, product, and content sliders where position carries meaning, such as multi-step flows and paginated content. The display is surface-tone aware so it reads on light, dark, and bright backdrops.
Key Business & UX Benefits
- Numeric position telegraphs slider depth, encouraging shoppers to view more slides rather than tap away after the first.
- Multi-step flows (onboarding, tutorial, checkout step recap) gain clarity when total count is visible up front.
- Surface-tone awareness keeps the readout legible against any backdrop, removing the contrast issues that disable position indicators.
- The compact display avoids the bullet-row sprawl that becomes unreadable in long slide sets.
Usage
LSwiperNumbers
Feature List
- Shows current slide number and total count (e.g. '1 / 5') for sliders and carousels
- Surface-tone aware so the readout stays legible against light, dark, and bright backdrops
- Telegraphs slider depth, encouraging shoppers to view more slides instead of bouncing after the first
- Compact display avoids the bullet-row sprawl that becomes unreadable in long slide sets
- Fits multi-step flows (onboarding, tutorial, checkout step recap) where total count carries meaning