Cube Effect

Simulates a rotating 3D cube by configuring creativeEffect with rotateY and translate offsets. No separate package — uses the Creative Effect plugin.

Import

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

Usage

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

CSS for the cube face transition

.c--slider-effect-creative .c--slider-a__slide {
  transition: transform 500ms ease;
}

How it works

The cube illusion comes from combining a 100% horizontal translate with a 90° Y-axis rotation on each face. The wrapper has perspective: 1200px and transform-style: preserve-3d so the 3D transforms compose correctly.

See also