Responsive / Breakpoints

1 item below 640px · 2 items at 640px · 3 items at 960px · 4 items at 1280px. Resize the window to see it adapt.

View code

<div id="my-slider">
  <div class="demo-slide s-purple">1</div>
  <div class="demo-slide s-blue">2</div>
  <div class="demo-slide s-green">3</div>
  <div class="demo-slide s-amber">4</div>
  <div class="demo-slide s-red">5</div>
  <div class="demo-slide s-pink">6</div>
  <div class="demo-slide s-teal">7</div>
  <div class="demo-slide s-indigo">8</div>
</div>

.demo-slide { height: 260px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }

.demo-slide { height: 260px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }

import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  items: 1,
  gutter: 16,
  loop: false,
  rewind: true,
  responsive: {
    640:  { items: 2, gutter: 16 },
    960:  { items: 3, gutter: 20 },
    1280: { items: 4, gutter: 24 },
  },
  plugins: [
    arrows(),
    pagination({ type: 'dots', clickable: true }),
  ],
})

Swap plugins on resize

Dots below 640px, progress bar at 960px+. On resize, the slider is destroyed and rebuilt with the correct plugins for the new breakpoint.

View code

<div id="my-slider">
  <div class="demo-slide s-purple">1</div>
  <div class="demo-slide s-blue">2</div>
  <div class="demo-slide s-green">3</div>
  <div class="demo-slide s-amber">4</div>
  <div class="demo-slide s-red">5</div>
</div>
<div id="my-progress" style="height:4px;background:#e5e7eb;border-radius:2px;margin-top:12px;"></div>

.demo-slide { height: 260px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }

.demo-slide { height: 260px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }

import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination, progress } from '@andresclua/sliderkit-plugins'

function getZone() {
  const w = window.innerWidth
  if (w < 640)  return 'sm'
  if (w < 960)  return 'md'
  return 'lg'
}

function buildPlugins(zone) {
  const p = [arrows()]
  if (zone === 'sm') p.push(pagination({ type: 'dots', clickable: true }))
  if (zone === 'lg') p.push(progress({ container: '#my-progress' }))
  return p
}

let zone = getZone()
let slider = new Slider('#my-slider', { items: 1, loop: false, speed: 300, plugins: buildPlugins(zone) })

let t
window.addEventListener('resize', () => {
  clearTimeout(t)
  t = setTimeout(() => {
    const newZone = getZone()
    if (newZone === zone) return
    zone = newZone
    slider.destroy()
    slider = new Slider('#my-slider', { items: 1, loop: false, speed: 300, plugins: buildPlugins(zone) })
  }, 150)
})

Conditional plugins per breakpoint

Pagination dots appear only below 640px. Progress bar appears only at 960px and above. Resize the window to see them switch.

View code

<div id="my-slider">
  <div class="demo-slide s-purple">1</div>
  <div class="demo-slide s-blue">2</div>
  <div class="demo-slide s-green">3</div>
  <div class="demo-slide s-amber">4</div>
  <div class="demo-slide s-red">5</div>
</div>
<div id="my-progress" style="height:4px;background:#e5e7eb;border-radius:2px;margin-top:12px;">
  <div id="my-progress-bar" style="height:100%;background:#6C2BD9;border-radius:2px;width:0%"></div>
</div>

.demo-slide { height: 260px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }

.demo-slide { height: 260px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; }

import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination, progress } from '@andresclua/sliderkit-plugins'

const plugins = [arrows()]

if (window.innerWidth < 640) {
  plugins.push(pagination({ type: 'dots', clickable: true }))
} else if (window.innerWidth >= 960) {
  plugins.push(progress({ container: '#my-progress' }))
}

new Slider('#my-slider', {
  items: 1,
  loop: false,
  speed: 300,
  plugins,
})