creativeEffect

A fully configurable effect where you define the exact 3D transform for the previous, active, and next slide positions — enabling unlimited custom transitions.

Import

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

Usage

new Slider('#el', {
  loop: true,
  plugins: [
    creativeEffect({
      prev: { translate: [0, '-100%', 0] },
      active: { translate: [0, 0, 0] },
      next: { translate: [0, '100%', 0] },
      perspective: true,
    }),
    arrows(),
  ],
})

CreativeTransform type

Field	Type	Description
`translate`	`[x, y, z]`	Values can be numbers (treated as px) or strings like `'100%'`. Becomes `translate3d(x, y, z)`.
`rotate`	`[rx, ry, rz]`	Degrees. Non-zero axes emit `rotateX/Y/Z(Ndeg)`.
`scale`	`number`	Uniform scale factor, e.g. `0.8`.
`opacity`	`number`	0–1 opacity. Defaults to `1` if omitted.

Options

Option	Type	Default	Description
`prev`	`CreativeTransform`	`translate(-100%, 0, 0)`	Transform applied to slides before the active one.
`active`	`CreativeTransform`	`translate(0, 0, 0)`	Transform applied to the active slide.
`next`	`CreativeTransform`	`translate(100%, 0, 0)`	Transform applied to slides after the active one.
`perspective`	`boolean`	`true`	Adds `preserve-3d` and `perspective: 1200px` on the wrapper for 3D depth.

Preset examples

Slide up

creativeEffect({
  prev:   { translate: [0, '-100%', 0] },
  active: { translate: [0, 0, 0] },
  next:   { translate: [0, '100%', 0] },
})

Cube (simplified)

creativeEffect({
  prev:   { translate: ['-100%', 0, 0], rotate: [0, 90, 0] },
  active: { translate: [0, 0, 0] },
  next:   { translate: ['100%', 0, 0], rotate: [0, -90, 0] },
})

CSS class

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

Demo

View creative effect demo →