Получить консультацию

Кратко о видео

В уроке разобрана интеграция Swiper.js в Taptop: структура разметки (swiper-container, swiper-slide через блок-лист с коллекцией), подключение коллекции к слайдам, кастомные стрелки навигации, инициализация Swiper через скрипт в MZ с нужными параметрами (loop, slidesPerView, spaceBetween). Связка работает так: блок-лист с коллекцией генерирует HTML-разметку слайдов, Swiper инициализируется на этом HTML через JS. Классы swiper-container и swiper-slide задаются через поле «класс» в Taptop — без них Swiper не работает. Loop-режим требует минимум трёх слайдов. Урок продвинутый — для тех, кто строит каталоги или слайдеры с данными из CMS. Нужен опыт работы с коллекциями, блок-листом и MZ-виджетом. Тем, кто не работал со Swiper раньше, рекомендую сначала посмотреть документацию Swiper.js — урок не вводит в библиотеку с нуля.

Вёрстка слайдера на Swiper.js с данными из коллекций в Taptop

Стандартный виджет слайдера не подходит — нужен кастомный с данными из коллекции. Как подключить Swiper.js в Taptop? Как связать карусель со списком из коллекции?

Swiper.js в Taptop: блок-лист с коллекцией создаёт HTML-разметку слайдов, скрипт Swiper инициализируется через кастомный код. Ключевые классы для обёртки, контейнера и каждого слайда — без них не работает. Для тех, кто уверенно верстает в Taptop. После просмотра делаешь кастомный слайдер с динамическими данными из коллекции.

Тайминги видео

00:00 — Введение: Игорь Литвин + Саша Гудаев, план вебинара 15:00 — Анонс клиентского режима Taptop 30:00 — Структура разметки для Swiper.js 1:00:00 — Подключение коллекции к слайдеру 1:30:00 — Навигация, пагинация и финальная настройка 1:50:00 — Ответы на вопросы