Stacked card deck

Slides stack like a deck of cards — each upcoming slide is visible behind the active one, offset slightly downward and rotated a few degrees. As you swipe past slides they drop away. perSlideOffset controls the Y gap between stacked cards (in px), and perSlideRotate controls the tilt angle in degrees. Great for testimonials, quotes, or photo collections.

View code

<div class="c--slider-a c--slider-a--effect" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
    <div class="c--slider-a__slide">4</div>
    <div class="c--slider-a__slide">5</div>
  </div>
</div>
<div id="my-pag" class="c--slider-a__pagination"></div>

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }

/* Effect layout: stacked absolute slides */
.c--slider-a--effect { height: 260px; }
.c--slider-a--effect .c--slider-a__wrapper { height: 100%; }
.c--slider-a--effect .c--slider-a__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: transform 0.4s ease;
}

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &--effect {
    height: 260px;
  }

  &--effect .c--slider-a__wrapper {
    height: 100%;
  }

  &--effect .c--slider-a__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease;
  }
}

import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination } from '@andresclua/sliderkit-plugins'
import { cardsEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  speed: 400,
  plugins: [
    cardsEffect({ perSlideOffset: 10, perSlideRotate: 2 }),
    arrows(),
    pagination({ el: '#my-pag', type: 'dots', clickable: true }),
  ],
})

Exaggerated shuffle

Increase perSlideOffset and perSlideRotate to create a more dramatic, shuffled-deck look. A higher rotation (5°) and larger offset (18px) makes each card clearly distinct — useful when slides have different background colours or content that benefits from visible separation.

View code

<div class="c--slider-a c--slider-a--effect" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
    <div class="c--slider-a__slide">4</div>
  </div>
</div>
<div id="my-pag" class="c--slider-a__pagination"></div>

.c--slider-a { position: relative; width: 100%; overflow: hidden; }
.c--slider-a__wrapper { display: flex; will-change: transform; }

.c--slider-a--effect { height: 260px; }
.c--slider-a--effect .c--slider-a__wrapper { height: 100%; }
.c--slider-a--effect .c--slider-a__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
}

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &--effect {
    height: 260px;
  }

  &--effect .c--slider-a__wrapper {
    height: 100%;
  }

  &--effect .c--slider-a__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
  }
}

import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination } from '@andresclua/sliderkit-plugins'
import { cardsEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  speed: 500,
  plugins: [
    cardsEffect({ perSlideOffset: 18, perSlideRotate: 5 }),
    arrows(),
    pagination({ el: '#my-pag', type: 'dots', clickable: true }),
  ],
})