← Back to Demos

Creative Effect

Creative 效果

Fully customisable per-slide transforms — choose a preset or define your own.

完全自訂的逐張變形效果 — 選擇預設或自行定義。

  • Demo image 1
  • Demo image 2
  • Demo image 3
  • Demo image 4
  • Demo image 5


      
      
Source Code

      

        js
        
var DS = DriftSlider;
var slider = new DS.DriftSlider('.drift-slider', {
  modules: [DS.Navigation, DS.Pagination, DS.Autoplay, DS.EffectCreative, DS.A11y],
  effect: 'creative',
  loop: true,
  autoplay: { enabled: true, delay: 3000 },
  speed: 600,
  creativeEffect: {
    perspective: true,
    prev: { translate: ['-100%', 0, 0], rotate: [0, -30, 0] },
    next: { translate: ['100%', 0, 0], rotate: [0, 30, 0] },
  },
});