flipEffect

Rotates slides around the Y axis like a page turn. Each slide sits at a rotateY offset from the active one — 0°, ±180°, ±360°, etc.

Import

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

Usage

new Slider('#el', {
  loop: true,
  plugins: [
    flipEffect(),
    arrows(),
  ],
})

How it works

On install the plugin:

• Enables preserve-3d and perspective: 1200px on the wrapper
• Positions all slides absolute, stacked at top: 0 / left: 0 / width: 100%
• Sets backface-visibility: hidden on each slide so the reverse side is invisible
• Applies rotateY(offset * 180deg) where offset = slideIndex - activeIndex

Add a CSS transition on the slides to animate the rotation:

.c--slider-effect-flip .c--slider-a__slide {
  transition: transform 600ms ease;
}

Options

Option	Type	Default	Description
slideShadows	boolean	true	Reserved for a future drop-shadow layer.
limitRotation	boolean	true	Reserved option (not yet implemented).

CSS class

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

Demo

View flip effect demo →