← Back to Demos

Deck Effect

牌堆效果

Card deck stack transition with optional 3D perspective and tilt.

卡片堆疊過場效果，可選 3D 透視與傾斜角度。

Slider Settings

loop autoplay speed 500

Stack

activeScale 0.85 stackOrigin stackScale 0.50 stackOffsetX 6 stackOffsetY 4 stackVisibleCount 3

3D

perspective 1200 depthSpacing 30 tiltX 5 tiltY -3 activeDepth 50

Visual

overlay shadow

Source Code

var DS = DriftSlider;
var slider = new DS.DriftSlider('.drift-slider', {
  modules: [DS.Navigation, DS.Pagination, DS.EffectDeck, DS.A11y],
  effect: 'deck',
  speed: 500,
  deckEffect: {
    stackOrigin: 'bottom-left',
    activeScale: 0.85,
    stackScale: 0.5,
    stackVisibleCount: 3,
    perspective: 1200,
    tiltX: 5,
    tiltY: -3,
  },
});