Соседний слайд в кадре

Peek создаёт видимый зазор для предыдущих и следующих слайдов — отступы слева/справа (или сверху/снизу для вертикального слайдера), чтобы было видно, что есть ещё слайды. Peek trim (опция peekTrim) — отрезание концовки: последний слайд прижимается к краю без дыры; в начале зазор (peek) остаётся.

Базовый пример

Одинаковый peek с обеих сторон:

Peek в процентах

Можно использовать CSS единицы измерения:

Асимметричный peek

Разные значения для левой и правой стороны:

Peek с несколькими слайдами

Peek работает вместе с perPage:

Вертикальный слайдер

Для вертикального слайдера используйте top и bottom:

Адаптивный peek

Peek можно изменять на разных breakpoints:

peekTrim (отрезание концовки)

Peek создаёт видимый зазор для предыдущих и следующих слайдов. Peek trim — отрезание: при peekTrim: true (по умолчанию) концовка прижимается к краю, без дыры справа; в начале зазор (peek) остаётся. Сравните:

Смешанные единицы

Можно комбинировать разные единицы измерения:

Опции

peek

• Тип: number | string | object
• По умолчанию: undefined

Задаёт отступы, показывающие часть соседних слайдов (реализуется через padding viewport-а слайдера).

Форматы:

peekTrim

• Тип: boolean
• По умолчанию: true

Peek trim (отрезание): при true концовка прижимается к краю — последний слайд без дыры справа. При false последний слайд выравнивается по левому краю, справа остаётся зазор. Peek создаёт зазор для соседних слайдов; в начале зазор слева — нормально.

Стилизация

Peek применяется к треку (viewport) .tvist-v1__track через CSS padding:

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

1. Peek применяется к viewport-у слайдера (.tvist-v1__track) через padding.
2. Доступная ширина для слайдов = ширина трека − peek left − peek right.
3. peekTrim (отрезание): по умолчанию концовка прижата к краю. peek — зазор для соседних слайдов; в начале зазор слева остаётся. Чтобы справа на последнем слайде оставался зазор, задайте peekTrim: false.