← Back to Demos

Cards Effect

卡片效果

Card stack, diagonal, and flip effects with interactive controls.

卡片堆疊、對角線和翻轉效果，搭配互動控制項。

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6

Slider Settings

mode loop autoplay speed 500

Cards Parameters

direction offsetX 30 offsetY 30 scale 0.92 opacity 0.85 overlay shadow

Diagonal Settings

diagonalMultiplier 2.5

Flip Settings

flipAxis

Source Code

var DS = DriftSlider;
var slider = new DS.DriftSlider('.drift-slider', {
  modules: [DS.Navigation, DS.Pagination, DS.EffectCards, DS.A11y],
  effect: 'cards',
  speed: 500,
  cardsEffect: {
    mode: 'stack',
    direction: 'tl-br',
    offsetX: 30,
    offsetY: 30,
    scale: 0.92,
    opacity: 0.85,
    overlay: true,
    shadow: true,
  },
});