Loop Mode

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

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

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

1

2

3

4

Real Index: 1 / Active: 0

Loop с объектной конфигурацией и клонами

Живой пример с использованием нового синтаксиса:

Loop с объектной конфигурацией и клонами

Демонстрация нового синтаксиса loop: { enabled, withClones }

1

2

3

4

activeIndex: 0

realIndex: 0

loop.withClones: true

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

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

Loop + perPage: 3, peek 120, 4 слайда

Кейс с perPage: 3, gap: 32, peek: 120 и всего 4 слайдами.
Слайдер в loop-режиме не должен давать «дыру» справа — даже если слайдов меньше, чем рекомендуется для бесконечной прокрутки.

Loop + perPage: 3, peek 120, 4 слайда

Кейс с 4 слайдами, peek по 120px слева/справа и бесконечным loop без дыр справа

1

2

3

4

В примере используется perPage: 3, gap: 32, peek: 120, loop: true. Даже при 4 слайдах не должно появляться пустого пространства справа.

activeIndex: 0

realIndex: 0

location: 0.00

containerSize: 0

leftGap: 0.00

rightGap: 0.00

new Tvist('.tvist', {
  gap: 0,
  perPage: 1,
  // Классический loop без клонов (back-compat):
  loop: true,
  arrows: true,
  pagination: true,
  drag: true
})

Loop с объектной конфигурацией и клонами

Новый формат настройки loop позволяет включить/выключить режим и управлять клонами:

new Tvist('.tvist', {
  perPage: 1,
  gap: 0,
  loop: {
    enabled: true,     // эквивалент loop: true
    withClones: true,  // включаем систему DOM-клонов
  },
  arrows: true,
  pagination: true,
  drag: true,
})

Код примера

HTML:

<div class="tvist-v1">
  <div class="tvist-v1__track">
    <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>
</div>

JavaScript:

const slider = new Tvist('.tvist', {
  perPage: 3,
  gap: 32,
  loop: true,
  drag: true,
  peek: 120,
  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%); }