fadeEffect

Cross-fades between slides using CSS opacity. Slides are stacked on top of each other; the active one fades in while inactive ones fade out.

Import

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

new Slider('#el', {
  loop: true,
  speed: 400,
  plugins: [
    fadeEffect({ crossFade: true }),
    arrows(),
  ],
})

On install the plugin:

Positions all slides absolute, stacked at top: 0 / left: 0 / width: 100%
Reads the slider speed option and adds a CSS transition: opacity Nms ease to each slide
Sets the active slide to opacity: 1 and all others to opacity: 0
Resets the wrapper transform to translate3d(0,0,0) so the core's translate animation doesn't interfere

On each afterSlideChange event the opacities are updated and the wrapper transform is reset to zero.

Option	Type	Default	Description
`crossFade`	`boolean`	`true`	When `false`, all slides stay at `opacity: 1` and only z-index changes — the incoming slide appears instantly on top.

The container receives .c--slider-effect-fade while the plugin is active.