← Back to Demos

Responsive Breakpoints

響應式斷點

Automatically adjust slidesPerView based on viewport width.

根據視窗寬度自動調整 slidesPerView。

  • Card 1

    Responsive content that adapts to your screen size.

  • Card 2

    Resize the browser window to see breakpoints in action.

  • Card 3

    Mobile shows 1 slide, tablet shows 2, desktop shows 3.

  • Card 4

    Breakpoints are configured via the breakpoints option.

  • Card 5

    Each breakpoint can override any slider parameter.

  • Card 6

    spaceBetween also adjusts per breakpoint.

Breakpoints: 768px → 2 slides | 1024px → 3 slides Current slidesPerView: 1

Source Code

js 
var DS = DriftSlider;
var slider = new DS.DriftSlider('.drift-slider', {
  modules: [DS.Navigation, DS.Pagination, DS.A11y],
  slidesPerView: 1,
  spaceBetween: 16,
  grabCursor: true,
  breakpoints: {
    768: { slidesPerView: 2, spaceBetween: 20 },
    1024: { slidesPerView: 3, spaceBetween: 24 },
  },
  on: {
    init: function(s) { updateSpv(s); },
    breakpoint: function(s) { updateSpv(s); },
  },
});
function updateSpv(s) {
  document.getElementById('current-spv').textContent = s.params.slidesPerView;
}