Slider
Swiper Navigation with Numbers
A swiper navigation numbers component
Overview
The Swiper Navigation Numbers component displays the current slide number and total count (e.g. "1 / 5") for sliders and carousels. It fits hero, product, and content sliders where users benefit from seeing position and count.
Key Business & UX Benefits
- Shows current slide and total so users know position and length.
- Numeric display is clear and accessible.
- Compact display fits above or below the slider.
- Theme-aligned styling for light and dark modes.
Pro-Tip from Larry: Use Swiper Navigation Numbers when slide count is important (e.g. multi-step flows).
Usage
LuiSwiperNavigationNumbers
Feature List
- Current slide and total count display (e.g. 1 / 5)
- Configurable position and styling
- Integrates with Swiper via useSwiper() composable
- Theme-aligned styling for light and dark modes
API Reference
| Prop | Default | Type |
|---|---|---|
color | black | "black" | "always-white" | "always-black" |
Swiper Navigation Compact
A compact slider navigation component providing accessible arrow and bullet controls with dark/light mode support.
Marketplace
The Marketplace package provides components and page templates for platform and marketplace business models with multi-vendor support, discovery-driven navigation, and scalable listing structures.