Расширения

Вложенный слайдер

Можно инициализировать второй экземпляр Tvist на отдельном root-элементе внутри слайда внешнего слайдера. Список слайдов и атрибут data-tvist-slide-index строятся только для элементов, чей ближайший предок с классом блока (tvist-v1) совпадает с root этого экземпляра — слайды внутри вложенного блока в родитель не попадают. Модуль drag у родителя не реагирует на жесты, начатые во вложенном блоке (ближайший к цели .tvist-v1 получает приоритет).

Автоматический поиск стрелок и контейнера пагинации также ограничен своим root: родитель пропускает управление вложенных слайдеров, даже если они инициализированы раньше него. Если своих элементов нет, они создаются при включении соответствующей опции. Явно переданные arrows.prev, arrows.next и pagination.container сохраняют приоритет и могут находиться вне root.

Живой пример

Вложенный слайдер

6 слайдов
HTML, CSS и JS в этих вкладках используются в предпросмотре.
Настроить свой →

Разметка

Вложенный слайдер — это полноценный блок с классом блока (например tvist-v1), вложенный в слайд родителя:

Инициализация

Оба root должны уже быть в DOM. Порядок конструкторов обычно снаружи внутрь (родитель, затем вложенный), так проще рассуждать о разметке; технически важно лишь, чтобы к моменту new Tvist('#nested', …) узел #nested существовал.

По умолчанию parent.destroy() не вызывает destroy() у вложенных экземпляров — так можно безопасно убирать внешний слайдер (например отключать карусель на десктопе), оставляя живыми мини-слайдеры картинок в карточках. Если нужно снести всё поддерево слайдеров разом, передайте { destroyNested: true }.