Pagination
Three pagination modes: clickable dot bullets, a fraction counter (2 / 5), and a horizontal progress bar. Dots rebuild automatically when responsive breakpoints change the items count.
Import
import { pagination } from '@andresclua/sliderkit-plugins'Options
| Option | Type | Default | Description |
|---|---|---|---|
type | 'dots' | 'fraction' | 'progress' | 'dots' | Pagination display style. |
clickable | boolean | true | Clicking a dot navigates to that page. Only applies to dots type. |
container | HTMLElement | string | null | outer wrapper | Where to append the pagination element. Defaults to the slider's outer wrapper. |
CSS classes
| Class | Applied when |
|---|---|
.sliderkit__pagination | The pagination wrapper, always. |
.sliderkit__pagination-bullet | Each dot button (dots type). |
.sliderkit__pagination-bullet--active | The active dot. |
.sliderkit__pagination-fraction | Added to wrapper for fraction type. |
.sliderkit__pagination-progress | Progress track (progress type). |
.sliderkit__pagination-progress-fill | Progress fill bar. |
Dots
pagination({ type: 'dots', clickable: true })One dot per page (not per slide). With items:3 and 9 slides you get 3 dots. Dots rebuild when the breakpoint changes.
Fraction
pagination({ type: 'fraction' })Renders plain text: 2 / 5. Useful as an overlay on top of the slider.
Progress
pagination({ type: 'progress' })A horizontal bar that fills as you advance through the slides.
Custom container
pagination({
type: 'dots',
container: '#my-pagination', // mount outside the slider
})