Slider
Swiper Scrollbar
Custom scrollbar control for sliders, sits below the slide track.
Overview
SwiperScrollbar is the custom scrollbar control that sits below a slider track. Drop it inside a CommonSwiper as an extra navigation affordance alongside arrows or bullets, especially when slides extend beyond what fits on a single screen.
Key Business & UX Benefits
- A visible scrollbar shows how much content lives beyond the fold, encouraging deeper exploration on long slide sets.
- Pairs with arrow and bullet controls to give every audience the navigation model they prefer (drag, click, tap).
- Custom styling sits below the track without intruding on slide content, keeping focus on the product or story.
- Drops into any
CommonSwiper, so adding scroll progress to long carousels is a one-line addition.
Usage
SwiperScrollbar Default
<CommonSwiper>
<!-- slides -->
<SwiperScrollbar />
</CommonSwiper>
Feature List
- Custom scrollbar control sits below the slide track inside any CommonSwiper
- Visible scrollbar shows how much content lives beyond the fold, encouraging deeper exploration
- Pairs with arrow and bullet controls so each audience picks the navigation model it prefers (drag, click, tap)
- Styled to sit below the track without intruding on slide content
- One-line addition to long carousels that need scroll progress
API Reference
| Prop | Default | Type |
|---|---|---|
orientationrequired | "vertical" | "horizontal" | |
surfaceTone | SurfaceTone ("dark" | "light" | "bright") |