cardsEffect

Stacks slides like a deck of cards. The active slide is on top; upcoming slides peek behind it with an increasing vertical offset, scale-down, and optional rotation.

Import

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

Usage

new Slider('#el', {
  loop: false,
  plugins: [
    cardsEffect({
      perSlideOffset: 8,
      perSlideRotate: 2,
    }),
    arrows(),
  ],
})

How it works

Slides are stacked absolute at the same position. For each slide at distance offset ahead of the active one:

translateY(offset * perSlideOffset px)
scale(1 - offset * 0.05)
rotate(offset * perSlideRotate deg)
z-index: 100 - offset

Slides behind the active card (offset < 0) are hidden with display: none.

Add a CSS transition to animate the deck:

.c--slider-effect-cards .c--slider-a__slide {
  transition: transform 400ms ease;
}

Options

Option	Type	Default	Description
`perSlideOffset`	`number`	`8`	Vertical pixel offset per card in the stack.
`perSlideRotate`	`number`	`2`	Degrees of rotation per card in the stack.

CSS class

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

Demo

View cards effect demo →