CSS Effects

@andresclua/sliderkit-effects provides 6 pure-CSS transition effects. No JavaScript animations — everything is driven by CSS transforms and transitions applied as classes.

Installation

pnpm add @andresclua/sliderkit-effects

Usage

import { Slider } from '@andresclua/sliderkit'
import { fade } from '@andresclua/sliderkit-effects'

new Slider('#el', {
  plugins: [fade()],
})

Available effects

Effect	Import	Description
fade	fade(opts?)	Cross-fade between slides. Best for 1 slide per page.
cube	cube(opts?)	3D cube rotation. Requires CSS perspective on container.
coverflow	coverflow(opts?)	iTunes-style coverflow with depth and rotation.
flip	flip(opts?)	Card flip on the Y axis. Best for 1 slide per page.
cards	cards(opts?)	Stacked card effect. Slides scale and rotate behind the active one.
creative	creative(opts?)	Fully configurable: provide prev/next/active transforms.

Fade example

import { fade } from '@andresclua/sliderkit-effects'

new Slider('#el', {
  slidesPerPage: 1,
  plugins: [
    fade({ crossFade: true }),
    arrows(),
  ],
})

Creative (custom) example

import { creative } from '@andresclua/sliderkit-effects'

new Slider('#el', {
  plugins: [
    creative({
      prev: { translate: ['-100%', 0, 0] },
      next: { translate: ['100%', 0, 0] },
      active: { translate: [0, 0, 0] },
    }),
  ],
})