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.

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">Slide 1</div>
    <div class="c--slider-a__slide">Slide 2</div>
    <div class="c--slider-a__slide">Slide 3</div>
    <div class="c--slider-a__slide">Slide 4</div>
    <div class="c--slider-a__slide">Slide 5</div>
  </div>
</div>
<div id="my-pag"></div>

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.c--slider-a__wrapper {
  display: flex;
  will-change: transform;
}
.c--slider-a__slide {
  flex-shrink: 0;
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  background: #6C2BD9;
  border-radius: 12px;
}
.c--slider-a__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.c--slider-a__arrow--prev { left: 12px; }
.c--slider-a__arrow--next { right: 12px; }

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &__slide {
    flex-shrink: 0;
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    background: #6C2BD9;
    border-radius: 12px;
  }

  &__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);

    &--prev {
      left: 12px;
    }

    &--next {
      right: 12px;
    }
  }
}

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

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

Infinite loop — 2 slides per page

Loop works with any slidesPerPage. The slider clones the last 2 slides before the start and the first 2 after the end, so boundaries always animate smoothly.

View code

<div class="c--slider-a" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="c--slider-a__slide">1</div>
    <div class="c--slider-a__slide">2</div>
    <div class="c--slider-a__slide">3</div>
    <div class="c--slider-a__slide">4</div>
    <div class="c--slider-a__slide">5</div>
    <div class="c--slider-a__slide">6</div>
  </div>
</div>

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.c--slider-a__wrapper {
  display: flex;
  will-change: transform;
}
.c--slider-a__slide {
  flex-shrink: 0;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  border-radius: 10px;
}
.c--slider-a__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.c--slider-a__arrow--prev { left: 8px; }
.c--slider-a__arrow--next { right: 8px; }

.c--slider-a {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__wrapper {
    display: flex;
    will-change: transform;
  }

  &__slide {
    flex-shrink: 0;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    border-radius: 10px;
  }

  &__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);

    &--prev {
      left: 8px;
    }

    &--next {
      right: 8px;
    }
  }
}

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

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