Getting Started

SliderKit is a modular, accessible slider library written in TypeScript. The core is always required; plugins, effects, and WebGL are optional.

Installation

Install with your preferred package manager:

pnpm add @andresclua/sliderkit
pnpm add @andresclua/sliderkit-plugins    # optional
pnpm add @andresclua/sliderkit-effects    # optional
pnpm add @andresclua/sliderkit-webgl      # optional
npm install @andresclua/sliderkit @andresclua/sliderkit-plugins
yarn add @andresclua/sliderkit @andresclua/sliderkit-plugins

HTML structure

SliderKit expects a container element with a wrapper and slides inside:

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">Slide 1</div>
    <div class="c--slider-a__slide">Slide 2</div>
    <div class="c--slider-a__slide">Slide 3</div>
  </div>
</div>

Alternatively, you can use the data-slide attribute instead of the class name to mark slides.

Basic usage

import { Slider } from '@andresclua/sliderkit'

const slider = new Slider('#my-slider', {
  slidesPerPage: 1,
  loop: true,
  speed: 400,
})

With plugins

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

const slider = new Slider('#my-slider', {
  slidesPerPage: 1,
  loop: true,
  speed: 400,
  plugins: [
    arrows(),
    pagination({ type: 'dots', clickable: true }),
    autoplay({ delay: 3000, pauseOnHover: true }),
  ],
})

Styling

Import the SCSS from @andresclua/sliderkit:

@use '@andresclua/sliderkit/scss/slider';

Or import the CSS directly if you don't use SCSS:

import '@andresclua/sliderkit/dist/slider.css'

Variables can be overridden before the import:

$slider-bg: transparent;
$slider-width: 100%;
@use '@andresclua/sliderkit/scss/slider';

Next steps