Fade effect

Slides cross-fade instead of sliding. Comes from @andresclua/sliderkit-effects, a separate package so it doesn't add weight to projects that don't need it.

Installation

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

Usage

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

new Slider('#el', {
  items: 1,
  loop: true,
  speed: 500,         // controls the fade duration
  plugins: [fadeEffect()],
})

Options

Option	Type	Default	Description
`duration`	`number`	slider `speed`	Fade duration in milliseconds. Defaults to the slider's `speed` option, so you can decouple them — e.g. fast slider, slow fade.
`easing`	`string`	`'ease'`	Any CSS easing function: `'linear'`, `'ease-in-out'`, `'cubic-bezier(...)'`, etc.
`crossFade`	`boolean`	`true`	When `true`, inactive slides fade to opacity 0. When `false`, they stay visible beneath the active slide.

How it works

All slides are stacked with position: absolute.
The slider's internal translate is neutralised — no sliding movement.
The existing .sliderkit__item--active class toggles opacity: 1 on the active slide. CSS transition handles the fade.
The container height is synced to the active slide's height on every slide change.

Notes

Only works with items: 1.
Works with loop: true, loop: false, and rewind: true.
crossFade: false is useful for a dissolve effect over a fixed background image.

Demo

See the fade demo →