iTunes-style coverflow

Adjacent slides are visible and rotated in 3D, creating the classic album-art coverflow look. Use slidesPerPage: 3 (or more) so the neighbours peek from the sides — that's what makes the effect work. The rotate option controls the Y-axis angle of the side cards, and depth pushes them back on the Z axis.

View code

<div class="c--slider-a c--slider-a--coverflow" 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 class="c--slider-a__slide">6</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__slide { flex-shrink: 0; height: 220px; }

/* Coverflow: show sides, don't clip them */
.c--slider-a--coverflow { overflow: visible; background: transparent; }
.c--slider-a--coverflow .c--slider-a__slide { transition: transform 0.4s ease; }

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

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

  &__slide {
    flex-shrink: 0;
    height: 220px;
  }

  &--coverflow {
    overflow: visible;
    background: transparent;
  }

  &--coverflow .c--slider-a__slide {
    transition: transform 0.4s ease;
  }
}

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

new Slider('#my-slider', {
  slidesPerPage: 3,
  gutter: 20,
  loop: true,
  speed: 400,
  plugins: [
    coverflowEffect({ rotate: 50, depth: 100, modifier: 1 }),
    arrows(),
    pagination({ el: '#my-pag', type: 'dots', clickable: true }),
  ],
})

Subtle coverflow (low rotate)

Lower the rotate value (e.g. 25) for a softer, more modern feel — side cards angle gently instead of fully turning. Combine with edgePadding so the very edges of neighbouring slides peek in, hinting that there's more content to explore.

View code

<div class="c--slider-a c--slider-a--coverflow" 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; }
.c--slider-a__slide { flex-shrink: 0; height: 220px; }

.c--slider-a--coverflow { overflow: visible; background: transparent; }
.c--slider-a--coverflow .c--slider-a__slide { transition: transform 0.5s ease; }

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

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

  &__slide {
    flex-shrink: 0;
    height: 220px;
  }

  &--coverflow {
    overflow: visible;
    background: transparent;
  }

  &--coverflow .c--slider-a__slide {
    transition: transform 0.5s ease;
  }
}

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

new Slider('#my-slider', {
  slidesPerPage: 2,
  edgePadding: 60,
  gutter: 16,
  loop: true,
  speed: 500,
  plugins: [
    coverflowEffect({ rotate: 25, depth: 60, modifier: 1 }),
    arrows(),
    pagination({ el: '#my-pag', type: 'dots', clickable: true }),
  ],
})