slideBy: 'page'

With multiple items, slideBy:'page' advances the whole visible page at once instead of one slide at a time. Here items:3 — each arrow click moves 3 slides.

1
2
3
4
5
6
7
8
9
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 class="demo-slide s-purple">9</div>
</div>
.demo-slide { height: 220px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; border-radius:6px; }
.demo-slide { height: 220px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; font-weight:700; color:#fff; border-radius:6px; }
import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  items: 3,
  gutter: 16,
  slideBy: 'page',  // advances 3 at a time
  loop: false,
  rewind: true,
  speed: 350,
  plugins: [
    arrows(),
    pagination({ type: 'dots', clickable: true }),
  ],
})