← Back to Demos

Centered Slides

居中滑塊

Centered active slide with partial view of adjacent slides using centeredSlides: true.

使用 centeredSlides: true 讓活動滑塊居中，並部分顯示相鄰滑塊。

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

Source Code

js 
var DS = DriftSlider;
var slider = new DS.DriftSlider('.drift-slider', {
  modules: [DS.Navigation, DS.Pagination, DS.A11y],
  centeredSlides: true,
  slidesPerView: 2.5,
  spaceBetween: 20,
  loop: true,
  speed: 400,
  grabCursor: true,
});