Slider
Swiper Nav Bar
Compact slider navigation strip with arrows plus bullets or numbers, surface-tone aware.
Overview
SwiperNavBar is the compact navigation strip that pairs with sliders. It combines arrow controls with either bullet indicators (navigationStyle="bullets") or a numeric position display (navigationStyle="numbers"), and adapts its tone to the parent surface via useSurfaceTone.
Reach for navigationStyle="numbers" on multi-step flows where slide count carries meaning; default to bullets for purely visual sliders. Arrow visibility can be configured per viewport.
Key Business & UX Benefits
- A compact nav strip preserves valuable above-the-fold space while still giving shoppers clear control over slider position.
- Switching between bullets and numbers matches the navigation to the content type, raising clarity on multi-step flows and tutorial sliders.
- Per-viewport arrow visibility tunes the touch experience on mobile against the precision experience on desktop.
- Surface-tone awareness keeps controls legible on any slider background, removing the contrast bugs that disable navigation.
Pro-Tip from Larry: Use
navigationStyle="numbers" on multi-step flows where slide count carries meaning; default to bullets for purely visual sliders.Usage
LSwiperNavBar
Feature List
- Compact strip pairs arrow controls with bullets (navigationStyle='bullets') or a numeric position display (navigationStyle='numbers')
- Per-viewport arrow visibility tunes touch on mobile against precision on desktop
- Adapts tone to the parent surface via useSurfaceTone for any slider backdrop
- Numbers style suits multi-step flows where slide count carries meaning; bullets fit purely visual sliders
- Preserves above-the-fold space while still giving shoppers clear control over slider position
API Reference
| Prop | Default | Type |
|---|---|---|
surfaceTone | SurfaceTone ("dark" | "light" | "bright") | |
showArrows | mobile | "none" | "mobile" | "desktop" | "both" |
showBullets | mobile | "none" | "mobile" | "desktop" | "both" |
navigationStyle | bullets | "numbers" | "bullets" |