Infinite loop — 1 slide per page

Set loop: true to wrap seamlessly from the last slide back to the first. Clones of the boundary slides are inserted in the DOM so the animation always looks continuous.

1
2
3
4
5
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>
.sliderkit__item { height: 260px; }

.sliderkit__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.9); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.sliderkit__arrow--prev { left: 12px; }
.sliderkit__arrow--next { right: 12px; }

.sliderkit__pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 12px 0;
}
.sliderkit__pagination-bullet {
  width: 10px; height: 10px; border-radius: 50%;
  background: #d1d5db; border: none; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.sliderkit__pagination-bullet--active { background: #6C2BD9; transform: scale(1.3); }
.sliderkit__item { height: 260px; }

.sliderkit__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.9); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.sliderkit__arrow--prev { left: 12px; }
.sliderkit__arrow--next { right: 12px; }

.sliderkit__pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 12px 0;
}
.sliderkit__pagination-bullet {
  width: 10px; height: 10px; border-radius: 50%;
  background: #d1d5db; border: none; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.sliderkit__pagination-bullet--active { background: #6C2BD9; transform: scale(1.3); }
import { Slider } from '@andresclua/sliderkit'
import { arrows, pagination } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  items: 1,
  loop: true,
  speed: 350,
  plugins: [
    arrows(),
    pagination({ type: 'dots', clickable: true }),
  ],
})

Infinite loop — 2 slides per page

Loop works with any items count. The slider clones boundary slides so transitions always animate smoothly.

1
2
3
4
5
6
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>
.sliderkit__item { height: 220px; }

.sliderkit__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.9); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.sliderkit__arrow--prev { left: 8px; }
.sliderkit__arrow--next { right: 8px; }
.sliderkit__item { height: 220px; }

.sliderkit__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.9); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.sliderkit__arrow--prev { left: 8px; }
.sliderkit__arrow--next { right: 8px; }
import { Slider } from '@andresclua/sliderkit'
import { arrows } from '@andresclua/sliderkit-plugins'

new Slider('#my-slider', {
  items: 2,
  gutter: 16,
  loop: true,
  speed: 350,
  plugins: [arrows()],
})