Coverflow Effect

An iTunes-style coverflow built with creativeEffect. Side slides are rotated and pushed back in Z to create depth, while the active slide faces forward.

Import

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

Usage

new Slider('#el', {
  loop: true,
  plugins: [
    creativeEffect({
      perspective: true,
      prev: {
        translate: ['-60%', 0, -200],
        rotate:    [0, 45, 0],
        opacity:   0.5,
      },
      active: {
        translate: [0, 0, 0],
        opacity:   1,
      },
      next: {
        translate: ['60%', 0, -200],
        rotate:    [0, -45, 0],
        opacity:   0.5,
      },
    }),
    arrows(),
  ],
})

CSS for smooth animation

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

Tuning tips

  • Increase the -200 Z translate to push side slides further back.
  • Adjust the 45 degree rotation to flatten or exaggerate the fan angle.
  • Lower opacity: 0.5 to make inactive slides more ghostly.
  • Use scale: 0.8 on prev/next for an additional size reduction.

See also