@andresclua/sliderkit-effects

CSS transition effects for SliderKit — fade, cube, coverflow, flip, cards, and creative.

Full documentation & demos →

Installation

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

Usage

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

new Slider('#my-slider', {
  plugins: [fadeEffect()],
})

Available effects

fadeEffect()

Cross-fade between slides.

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

new Slider('#my-slider', { plugins: [fadeEffect()] })

cubeEffect()

3D cube rotation between slides.

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

new Slider('#my-slider', { plugins: [cubeEffect()] })

coverflowEffect()

iTunes-style coverflow perspective.

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

new Slider('#my-slider', { plugins: [coverflowEffect()] })

flipEffect()

Card flip transition.

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

new Slider('#my-slider', { plugins: [flipEffect()] })

cardsEffect()

Stacked card deck with depth offset.

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

new Slider('#my-slider', { plugins: [cardsEffect()] })

creativeEffect()

Fully customisable — define prev and next transforms.

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

new Slider('#my-slider', {
  plugins: [
    creativeEffect({
      prev: { translate: ['-100%', 0, 0] },
      next: { translate: ['100%', 0, 0] },
    }),
  ],
})

CSS class added per effect

When an effect is active, a modifier class is added to the slider container so you can scope your own transition CSS:

| Effect | Class | |---|---| | fadeEffect | .c--slider-effect-fade | | cubeEffect | .c--slider-effect-cube | | coverflowEffect | .c--slider-effect-coverflow | | flipEffect | .c--slider-effect-flip | | cardsEffect | .c--slider-effect-cards | | creativeEffect | .c--slider-effect-creative |

Documentation · GitHub · MIT License