progress plugin

Mounts a thin bar below the slider that fills from left to right as you advance through the slides.

Import

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

Usage

import { Slider } from '@andresclua/sliderkit'
import { progress } from '@andresclua/sliderkit-plugins'

new Slider('#el', {
  items: 1,
  loop: false,
  plugins: [progress()],
})

Options

Option	Type	Default	Description
container	string | HTMLElement	undefined	Where to mount the progress bar. If omitted, the bar is inserted immediately after the slider's outer wrapper.

Styling

The plugin generates this HTML:

div.sliderkit__progress
  div.sliderkit__progress-bar

Style it however you want:

.sliderkit__progress {
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  margin-top: 12px;
  overflow: hidden;
}

.sliderkit__progress-bar {
  height: 100%;
  background: #6C2BD9;
  border-radius: 2px;
  transition: width 0.3s ease;
}

Notes

• Works best with loop:false — in loop mode the bar reaches 100% at the last real slide, then jumps back.
• The bar width is calculated as (activeIndex / (slideCount - 1)) * 100%. First slide = 0%, last slide = 100%.

Demo

See the progress demo →