Getting Started

SliderKit is a lightweight, accessible carousel library written in TypeScript. The core handles all sliding logic; plugins add arrows, pagination, and more.

Installation

npm install @andresclua/sliderkit @andresclua/sliderkit-plugins
# or
pnpm add @andresclua/sliderkit @andresclua/sliderkit-plugins

HTML

Give your slider container an id. Drop your slides directly inside — no extra wrapper needed.

<div id="my-slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

Required CSS

The slider injects layout styles at runtime. You need to provide the structural rules:

/* clip the sliding track */
.sliderkit__overflow { overflow: hidden; }

/* horizontal carousel — added automatically by the JS */
.sliderkit--horizontal { white-space: nowrap; }
.sliderkit--horizontal > .sliderkit__item { display: inline-block; vertical-align: top; }

All demo pages include a complete stylesheet reference in their CSS tab.

Basic usage

import { Slider } from '@andresclua/sliderkit'

new Slider('#my-slider', { items: 1, loop: true, speed: 300 })

With plugins

Plugins live in a separate package so you only ship what you actually use. Import each plugin by name — anything you don't import is tree-shaken out of your bundle. Pass them as an array to the plugins option; the slider calls install on each one after init and destroy when the slider is torn down.

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

new Slider('#my-slider', {
  items: 1,
  loop:  true,
  speed: 300,
  plugins: [
    arrows(),
    pagination({ type: 'dots', clickable: true }),
  ],
})

Next steps