Auto Width / Auto Height

Режим, в котором размер слайдов не задаётся слайдером, а определяется содержимым или вашими CSS-стилями.

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

• Слайды разной ширины (горизонтальный слайдер) или разной высоты (вертикальный).
• Контент сам задаёт размер: карточки с разным текстом, изображения с разными пропорциями.
• Нужна карусель «как есть», без приведения всех слайдов к одному размеру.

Auto Width (горизонтальный слайдер)

При autoWidth: true слайдер не устанавливает слайдам width. Ширина берётся из:

• инлайн-стиля style="width: ...",
• CSS-классов,
• содержимого (например, изображения).

Auto Width

Смотреть код →

Ширина слайдов задаётся содержимым или CSS, слайдер не переопределяет размеры

Узкий180px

Средний280px

Широкий380px

Средний260px

Узкий200px

Широкий340px

Слайд: 1 / 6

Код примера (Auto Width)

HTML: у каждого слайда своя ширина через стиль или класс.

<div class="tvist-v1">
  <div class="tvist-v1__container">
    <div class="tvist-v1__slide" style="width: 180px">Узкий</div>
    <div class="tvist-v1__slide" style="width: 280px">Средний</div>
    <div class="tvist-v1__slide" style="width: 380px">Широкий</div>
    <!-- ... -->
  </div>
</div>

JavaScript:

new Tvist('.tvist-v1', {
  autoWidth: true,
  gap: 16,
  perPage: 1,
  center: false,
  speed: 350,
})

Auto Height (вертикальный слайдер)

При direction: 'vertical' и autoHeight: true слайдер не задаёт слайдам высоту. Высота определяется вашими стилями или контентом.

Auto Height (вертикальный)

Смотреть код →

Высота слайдов по содержимому при direction: 'vertical'

Короткий100px

Высокий180px

Средний140px

Высокий160px

Короткий90px

Слайд: 1 / 5

Код примера (Auto Height)

new Tvist('.tvist-v1', {
  direction: 'vertical',
  autoHeight: true,
  gap: 12,
  perPage: 1,
  center: true,
  speed: 350,
})

Контейнеру слайдера нужно задать высоту (например, height: 320px), иначе вертикальный скролл не будет ограничен.

Опции

Опция	Тип	По умолчанию	Описание
autoWidth	boolean	false	Ширина слайдов по содержимому (горизонтальный слайдер).
autoHeight	boolean	false	Высота слайдов по содержимому (вертикальный слайдер).

Рекомендации

1. perPage: 1 — в режиме auto размеры слайдов разные, на «странице» обычно показывается один слайд. Рекомендуется явно указать perPage: 1.
2. Задайте размер слайдам — через width/height в стилях или через контент (например, изображения с явными размерами), иначе до первого измерения размер может быть нулевым.
3. Loop — режим loop: true с auto width/height поддерживается; клоны получают те же размеры, что и оригинальные слайды.

Как это работает

1. Слайдер не устанавливает слайдам width (при autoWidth) или height (при autoHeight), только отступы gap (margin).
2. После отрисовки измеряются фактические размеры слайдов из DOM (offsetWidth / offsetHeight).
3. Позиции слайдов считаются как сумма размеров предыдущих слайдов плюс отступы.
4. Навигация, drag, loop и остальные модули работают как обычно; при необходимости используется размер конкретного слайда через внутренний API.

Совместимость с другими опциями

• center — поддерживается, активный слайд центрируется по своему размеру.
• loop — поддерживается.
• peek — учитывается при расчёте видимой области.
• breakpoints — можно менять опции по ширине экрана; при смене breakpoint размеры пересчитываются при следующем update() (в т.ч. при resize).

Отличия от обычного режима

Параметр	Обычный режим	Auto Width / Auto Height
Размер слайда	Один на всех (по perPage)	Свой у каждого слайда (из DOM)
Кто задаёт размер	Слайдер	Ваши стили / контент
EndIndex	slideCount - perPage	slideCount - 1 (по одному слайду)

API

Размер конкретного слайда доступен через движок (для модулей и расширений):

engine.getSlideSize(index: number): number

При включённом auto-режиме возвращается измеренный размер слайда с заданным индексом.