← Back to Demos

Coverflow Custom Sizing

Coverflow 自訂尺寸

Custom sizing calculator — cropSides vs scale mode for precise control.

自訂尺寸計算器 — cropSides 與 scale 模式的精確控制。

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

Mode

Size Settings

Coverflow Appearance

Presets: 


      
      
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: 2.075,   // containerWidth / centerWidth
  centeredSlides: true,
  speed: 500,
  coverflowEffect: {
    cropSides: true,
    scale: 1,
    stretch: -16,
    depth: 0,
    rotate: 0,
    opacity: 0.8,
    overlay: true,
    align: 'center',
    staggerY: 0,
    visibleSides: 'both',
  },
});