pagination

Five pagination modes: dots, fraction, progress bar, dynamic bullets, and fully custom HTML.

Import

import { pagination } from '@andresclua/sliderkit-plugins'

Usage

new Slider('#el', {
  plugins: [
    pagination({
      type: 'dots',
      clickable: true,
    }),
  ],
})

Options

Option	Type	Default	Description
type	'dots' | 'fraction' | 'progress' | 'dynamic' | 'custom'	'dots'	Pagination style.
el	string | HTMLElement	—	Target element. Auto-created inside container if omitted.
clickable	boolean	true	Allow clicking dots to navigate (dots/dynamic only).
dynamicBullets	boolean	false	Scale nearby bullets smaller (dynamic mode).
renderCustom	({ current, total }) => string	—	Custom HTML renderer (custom mode).

Types

// Dots
pagination({ type: 'dots', clickable: true })

// Fraction "2 / 5"
pagination({ type: 'fraction' })

// Horizontal fill bar
pagination({ type: 'progress' })

// Shrinking dots around active
pagination({ type: 'dynamic', dynamicBullets: true })

// Custom HTML
pagination({
  type: 'custom',
  renderCustom: ({ current, total }) =>
    `<strong>${current}</strong> of ${total}`,
})

Demos

• Dots
• Fraction
• Progress
• Dynamic
• Custom