Plugins

Plugins extend the slider with UI features. Import only what you need from @andresclua/sliderkit-plugins.

Plugins live in a separate package — added as extras to each project

Frontend Maintained by Amaia, Diego Backend Maintained by Mara, Nerea

Just like the core, contributions are welcome — but only these maintainers have merge access. This keeps the plugin API consistent across projects.

Installation

pnpm add @andresclua/sliderkit-plugins

Usage

import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination, autoplay } from '@andresclua/sliderkit-plugins'

new Slider('#el', {
  plugins: [
    arrows(),
    pagination({ type: 'dots' }),
    autoplay({ delay: 3000 }),
  ],
})

// Or register post-init:
slider.use(mouseWheel())

Available plugins

Plugin	Import	Description
arrows	`arrows(opts?)`	Previous/next navigation buttons.
pagination	`pagination(opts?)`	Dots, fraction, progress, dynamic, or custom pagination.
autoplay	`autoplay(opts?)`	Automatic slide advancement with pause on hover/focus.
thumbnails	`thumbnails(opts?)`	Clickable thumbnail strip synced with the slider.
progressBar	`progressBar(opts?)`	Animated progress bar that fills as slides advance.
slideCounter	`slideCounter(opts?)`	Overlay badge showing "2 / 5" style counter.
mouseWheel	`mouseWheel(opts?)`	Navigate with the mouse wheel or trackpad scroll.
lazyLoad	`lazyLoad(opts?)`	IntersectionObserver-based image lazy loading.
parallax	`parallax(opts?)`	CSS-based parallax effect on slide content.
autoHeight	`autoHeight(opts?)`	Animate the container height to match the active slide.
virtualSlides	`virtualSlides(opts?)`	Render only visible slides for huge datasets.
centerMode	`centerMode(opts?)`	Center the active slide with partial prev/next visible.
variableWidth	`variableWidth(opts?)`	Allow slides with different widths.

Writing your own plugin

import type { SliderPlugin } from '@andresclua/sliderkit'

function myPlugin(): SliderPlugin {
  return {
    name: 'my-plugin',
    install(slider) {
      // slider is the full SliderInstance
      slider.on('afterSlideChange', ({ index }) => {
        console.log('slide changed to', index)
      })
    },
    destroy() {
      // cleanup
    },
  }
}