Card flip (Y axis)

Each slide flips like a playing card on the Y axis. The outgoing slide rotates 90° away while the incoming slides in from −90°. Requires the effect layout (stacked absolute slides) and CSS perspective on the container. backface-visibility: hidden prevents the back of the card from showing through.

View code

<div class="c--slider-a c--slider-a--effect c--slider-a--flip" 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; }

/* 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%;
}

/* Flip: perspective + no back-face bleed */
.c--slider-a--flip { perspective: 1200px; }
.c--slider-a--flip .c--slider-a__slide {
  transition: transform 0.6s ease;
  backface-visibility: hidden;
}

.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%;
  }

  &--flip {
    perspective: 1200px;
  }

  &--flip .c--slider-a__slide {
    transition: transform 0.6s ease;
    backface-visibility: hidden;
  }
}

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

new Slider('#my-slider', {
  loop: false,
  rewind: true,
  speed: 600,
  plugins: [
    flipEffect(),
    arrows(),
    pagination({ el: '#my-pag', type: 'dots', clickable: true }),
  ],
})

Flip with autoplay

Flip combined with autoplay creates a rotating info-card display — great for testimonial carousels, feature highlights, or rotating announcements. Keep speed (800ms) and delay (3000ms) generous enough for users to read the content before it flips.

Card A

Card B

Card C

Card D

View code

<div class="c--slider-a c--slider-a--effect c--slider-a--flip" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">Card A</div>
    <div class="c--slider-a__slide">Card B</div>
    <div class="c--slider-a__slide">Card C</div>
  </div>
</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%;
}

.c--slider-a--flip { perspective: 1200px; }
.c--slider-a--flip .c--slider-a__slide {
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  backface-visibility: hidden;
}

.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%;
  }

  &--flip {
    perspective: 1200px;
  }

  &--flip .c--slider-a__slide {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
  }
}

import { Slider } from '@andresclua/sliderkit'
import { autoplay } from '@andresclua/sliderkit-plugins'
import { flipEffect } from '@andresclua/sliderkit-effects'

new Slider('#my-slider', {
  loop: true,
  speed: 800,
  plugins: [
    flipEffect(),
    autoplay({ delay: 3000, pauseOnHover: true }),
  ],
})