Как сделать ГоризонтальНый слайдер-аккордеон в Зеро блоке на Тильде?

Инструкция

Эта модификация позволяет создать в Zero Block эффект интерактивных карточек с фоновым изображением, которые раскрываются при клике, показывая дополнительную информацию (иконку, заголовок и описание).

Шаг 1. Подготовьте Zero Block
Вам понадобится создать один Zero Block и подготовить в нем элемент, который станет контейнером для ваших будущих раскрывающихся карточек.

1. Создайте новый Zero Block или откройте существующий на нужной странице.
2. Добавьте в этот Zero Block один элемент "Шейп" (Shape). Этот Шейп будет служить главным контейнером, внутри которого будут располагаться и анимироваться все карточки.
3. Важно! В поле "CSS Class Name" (Имя CSS класса) задайте уникальный класс (например, my-cards-container). Вам нужно будет ввести точно такое же имя в генераторе кода.
4. Задайте этому Шейпу-контейнеру нужные размеры и позицию в Zero Block. Именно его размеры будут определять общую область, которую займет ваш блок с раскрывающимися карточками.
5. Убедитесь, что Шейп-контейнер пустой внутри. Не добавляйте в него другие элементы Tilda (тексты, изображения, другие шейпы). Скрипт сам создаст и разместит содержимое карточек.

Шаг 2. Настройте параметры в Генераторе
Теперь перейдите в ваш Генератор модификации и заполните следующие поля, определяя внешний вид и поведение карточек:

• Класс шейпа в зеро блоке: Введите точно такой же CSS класс, который вы присвоили Шейпу-контейнеру на Шаге 1.
• Скругление углов карточек (рх): Укажите значение в пикселях для радиуса скругления углов каждой карточки.
• Выберите тип шрифта: Выберите, какой из шрифтов вашего сайта (основной для заголовков или основной для описаний, заданные в Настройках Сайта -> Шрифты) будет использоваться как базовый стиль для текста внутри карточек.
• Цвет заголовка: Выберите цвет текста для Заголовка карточки, когда она находится в активном (раскрытом) состоянии.
• Цвет описания: Выберите цвет текста для Описания карточки, когда она находится в активном (раскрытом) состоянии.

Настройки слайдов для разных экранов

• Растояние между слайдами (рх): Укажите промежуток в пикселях между соседними карточками.
• Ширина открытого слайда (рх): Задайте ширину, которую будет занимать активная (раскрытая) карточка в пикселях.
• Ширина закрытого слайда (рх): Задайте ширину, которую будут занимать неактивные (свернутые) карточки в пикселях.
• Размер заголовка (рх): Укажите размер шрифта заголовка в пикселях, когда карточка активна.
• Размер описания (рх): Укажите размер шрифта описания в пикселях, когда карточка активна.
• Расположение контента внутри слайда: Определяет вертикальное расположение блока с иконкой и текстом внутри карточки (например, вверху или внизу).
• Отступ снизу/сверху (рх): Определяет расстояние до нижней или верхней границы карточек.
• Отступ слева (рх): Определяет расстояние от левой границы карточек.
• Ширина иконок (рх): Укажите ширину иконки рядом с текстом в пикселях.
• Высота иконок (рх): Укажите высоту иконки рядом с текстом в пикселях.

Добавить карточку
Используйте этот блок для добавления информации для каждой отдельной карточки-слайда. Нажмите "Добавить карточку" столько раз, сколько карточек вам нужно.

• Ссылка на изображение: Вставьте полный URL фонового изображения для этой конкретной карточки.

Как получить ссылку на изображение?
Вставляем галерею GL12 и загружаем в неё изображение, сохраняем блок, открываем снова, копируем ссылку и вставляем в генератор. Формат файла советуем использовать svg или png;

• Заголовок: Введите текст заголовка для этой карточки.
• Описание: Введите текст описания для этой карточки.
• Ссылка на иконку: Вставьте полный URL изображения для небольшой иконки, которая будет отображаться рядом с текстом этой карточки.

Шаг 3. Скопируйте код и опубликуйте

1. Когда всё готово — копируешь HTML-код и вставляешь его в блок Т123.

Проверка и устранение проблем:

• Если блок не работает или отображается некорректно, убедитесь, что класс Шейпа-контейнера в Zero Block точно совпадает с классом, указанным в генераторе, и что этот Шейп пустой внутри.