Basic Usage

基本用法

Navigation arrows, pagination dots, and touch drag — the essentials.

導航箭頭、分頁圓點和觸控拖曳 — 最基本的功能。

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5

Current Slide: 1 / 5 Progress: 0%

Source Code

var DS = DriftSlider;
var slider = new DS.DriftSlider('.drift-slider', {
  modules: [DS.Navigation, DS.Pagination, DS.Keyboard, DS.A11y],
  slidesPerView: 1,
  spaceBetween: 20,
  speed: 400,
  grabCursor: true,
  keyboard: { enabled: true },
  on: {
    slideChange: function(s) {
      document.getElementById('current-index').textContent = s.realIndex + 1;
    },
    progress: function(s, p) {
      document.getElementById('current-progress').textContent = Math.round(p * 100) + '%';
    },
  },
});