Tvist

Appearance

PerPage Example ​

Демонстрация опции perPage для отображения нескольких слайдов одновременно.

PerPage: несколько слайдов на экран

Демонстрация опции perPage для показа нескольких слайдов одновременно

perPage: 1 (по умолчанию)

1
2
3
4
5
6
7
8

perPage: 2

1
2
3
4
5
6
7
8
1 / 8

perPage: 3 с зазором

1
2
3
4
5
6
7
8
1 / 8

perPage: 4 (grid-style)

1
2
3
4
5
6
7
8
9
10
11
12
1 / 12

perPage: 2, loop: true, 1 слайд

1
activeIndex: 0 / realIndex: 0

Описание ​

Опция perPage определяет, сколько слайдов будет видно одновременно на экране. Это основной способ создания слайдеров с несколькими элементами в видимой области.

Основные возможности ​

  • Фиксированное количество слайдов: задайте perPage: 2, perPage: 3 и т.д.
  • Автоматический расчет размеров: слайды равномерно распределяются по ширине контейнера
  • Работа с зазорами: используйте gap для создания отступов между слайдами
  • Навигация: переключение происходит группами слайдов (по perPage за раз)

Код примеров ​

perPage: 1 (по умолчанию) ​

javascript
const slider = new Tvist('.tvist', {
  perPage: 1,
  gap: 0,
  speed: 300,
  drag: true
});

Классический слайдер "один слайд на экран". Подходит для главных баннеров, галерей изображений в полную ширину.

perPage: 2 ​

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

Показывает два слайда одновременно. Идеально для карточек товаров, портфолио, списков статей.

perPage: 3 с зазором ​

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

Три слайда с увеличенным зазором. Отлично подходит для каталогов, галерей миниатюр, списков категорий.

perPage: 4 (grid-style) ​

javascript
const slider = new Tvist('.tvist', {
  perPage: 4,
  gap: 12,
  speed: 300,
  drag: true
});

Четыре слайда в grid-стиле. Подходит для плотных списков, логотипов партнеров, большого количества элементов.

perPage: 2, loop: true, 1 слайд (граничный случай) ​

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

В разметке один слайд. При loop: true слайдер клонирует его, чтобы заполнить видимую область и обеспечить бесконечную прокрутку.

HTML разметка ​

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 class="tvist-v1__slide">5</div>
    <div class="tvist-v1__slide">6</div>
    <div class="tvist-v1__slide">7</div>
    <div class="tvist-v1__slide">8</div>
  </div>
</div>

CSS стили ​

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

Важные моменты ​

  1. Навигация по группам: при perPage: 3 слайдер будет листать по 3 слайда за раз
  2. Gap и размеры: зазор gap учитывается при расчете ширины слайдов автоматически
  3. Последняя группа: если слайдов меньше чем perPage, они все равно отобразятся корректно
  4. Drag: при включенном drag можно свободно перетаскивать слайды, не ограничиваясь группами

Когда использовать ​

  • perPage: 1 — главные баннеры, hero-секции, полноэкранные галереи
  • perPage: 2 — карточки товаров, портфолио, сравнение
  • perPage: 3 — списки статей, категории, средние каталоги
  • perPage: 4+ — логотипы, теги, большие списки элементов

Связанные примеры ​

  • Responsive Example — адаптивное изменение perPage на разных экранах
  • Loop Mode — бесконечная прокрутка с несколькими слайдами
  • Drag Navigation — перетаскивание с perPage