Loop Mode

Бесконечная прокрутка с клонами.

Бесконечная прокрутка

Слайдер с бесконечным циклом и 2 слайдами на странице

1

2

3

4

Real Index: 1 / Active: 0

Loop + perPage: 1 с изображениями

Бесконечная прокрутка по одному слайду с картинками, без зазора между слайдами:

new Tvist('.tvist', {
  gap: 0,
  perPage: 1,
  loop: true,
  arrows: true,
  pagination: true,
  drag: true
})

Код примера

HTML:

<div class="tvist-v1">
  <div class="tvist-v1__container">
    <div class="tvist-v1__slide">1</div>
    <div class="tvist-v1__slide">2</div>
    <div class="tvist-v1__slide">3</div>
    <div class="tvist-v1__slide">4</div>
  </div>
</div>

JavaScript:

const slider = new Tvist('.tvist', {
  perPage: 2,
  gap: 20,
  loop: true,
  drag: true,
  speed: 300
});

CSS:

.tvist-v1__slide {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: bold;
  color: white;
}

.tvist-v1__slide[data-tvist-slide-index="0"],
.tvist-v1__slide[data-tvist-slide-index="4"],
.tvist-v1__slide[data-tvist-slide-index="8"] { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.tvist-v1__slide[data-tvist-slide-index="1"],
.tvist-v1__slide[data-tvist-slide-index="5"],
.tvist-v1__slide[data-tvist-slide-index="9"] { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.tvist-v1__slide[data-tvist-slide-index="2"],
.tvist-v1__slide[data-tvist-slide-index="6"],
.tvist-v1__slide[data-tvist-slide-index="10"] { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.tvist-v1__slide[data-tvist-slide-index="3"],
.tvist-v1__slide[data-tvist-slide-index="7"],
.tvist-v1__slide[data-tvist-slide-index="11"] { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }