← Back to Demos

Coverflow Effect

Coverflow 效果

3D cover flow effect with interactive controls to adjust all parameters.

3D 封面流效果，搭配互動控制項調整所有參數。

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

Slider Settings

Coverflow Parameters



      
      
Source Code

      

        js
        
var DS = DriftSlider;
var slider = new DS.DriftSlider('.drift-slider', {
  modules: [DS.Navigation, DS.Pagination, DS.EffectCoverflow, DS.A11y],
  effect: 'coverflow',
  slidesPerView: 3,
  centeredSlides: true,
  speed: 500,
  coverflowEffect: {
    depth: 200,
    rotate: 30,
    scale: 0.85,
    stretch: 0,
    opacity: 0.6,
    align: 'center',
    overlay: true,
    fillCenter: false,
  },
});