Как сделать слайдер в Тильде: стандартные и кастомные решения

Слайдер — это удобный способ показать несколько картинок, логотипов или товаров в одном блоке. В Тильде есть два варианта создания слайдеров: готовые стандартные блоки и кастомные в зероблоках. Сейчас подробненько разберем, как сделать слайдеры в Тильде и как их настроить.

В Тильде уже есть несколько шаблонных вариантов того, как сделать слайдер. Найти их можно в стандартных блоках, просто введя «слайдер» в поиске.

В зависимости от задач можно выбрать один из готовых вариантов:

• Промо слайдер — подходит для изображений с текстом, портфолио, кейсов;
• Слайдер с баннерами — картинка, раздел, заголовок, текст;
• Слайдер с текстом и изображением — картинка слева или справа плюс текст;
• Слайдер с картинками — простой способ, как сделать галерею в Тильде;
• Слайдер для карточек товаров — актуально для интернет-магазинов;
• Слайдер с отзывами — целых 7 вариантов компоновки контента;
• Слайдер с логотипами — удобно показывать партнеров или клиентов;
• Слайдер с потоками — автоматически загружает карточки из потоков (например, карточки статей из блога).

Как видите, слайдеров для Тильды много, есть из чего выбрать. Особенно если вам не нужно подгонять слайды под основной дизайн.

Все стандартные слайдеры настраиваются в двух вкладках.

Контент → Карточка. Здесь можно добавить изображения, текст, названия кнопок и ссылки для каждой карточки.

Настройки — здесь меняем размеры, отступы, стили и анимацию. Что можно настроить:

• ширину и высоту слайдов;
• масштабирование изображений;
• управляющие элементы (стрелки, точки);
• кнопки (цвет, текст, ссылка);
• автопролистывание (смена слайдов по времени);
• типографику (если в слайдере есть текст);
• кликабельность логотипов (если это слайдер с логотипами).

В целом, стандартные слайдеры для Тильды простые в настройке и с ними не должно возникнуть особых проблем.

Если стандартные решения не подходят, то сейчас расскажем, как сделать слайдер из зероблока. Чтобы было побыстрее, мы пользуемся платным сервисом Нолим: там есть шаблоны разных блоков, включая слайдеры для Тильды. Оттуда будем копировать код.

Такой вариант есть в нашем проекте — сайте учебного центра «СИГУР». На этом примере и будем делать слайдер.

1. Идем в Нолим и ищем подходящий шаблон слайдера, чтобы он подходил под нашу задачу.

2. Создаем зероблок.

3. Собираем в зероблоке шаблон карточки: добавляем контент и управляющие элементы внутрь зероблока (стрелки, точки). На каждый управляющий элемент создаем свою ссылку (в будущем это сохранит время при верстке).

4. Дублим все слайды в отдельные зероблоки.

6. Переходим в Тильду и копируем ID тех слайдов, которые нужны нам внутри слайдера. ID можно найти на панели над блоком (см. скрин ниже) либо в настройках блока в поле Block ID.

7. Вводим ID всех блоков через запятую и заполняем все поля, которые запрашивает Нолим (чуть выше этих полей у Нолим есть понятная инструкция по заполнению, рекомендуем все прочитать).

8. Важное о поле «‎Анимация на первом слайде». Если у вас в зероблоке предусмотрена анимация на первом слайде, то в Нолим ее лучше отключить, чтобы избежать проблем с загрузкой.

Например, анимация на слайде длится 3 секунды, но человек решил нажать на слайдер на первой же секунде. Получается, что анимация не проигралась, а когда переключается второй слайд — все уже на первоначальных позициях. То есть анимация не прошла свой цикл до конца, и для пользователя это будет выглядеть так, как будто что-то сломалось.

9. Когда мы все заполнили в Нолим, нажимаем «Копировать код» и переходим в Тильду.

10. Ниже зероблока добавляем блок T123 (HTML-код) и вставляем туда код. Нажимаем «Опубликовать» и готово. Если что-то не работает, то просто посмотрите инструкцию от Нолима на этой же странице. Как правило, все ответы уже найдены, решения описаны, и остается только найти их в инструкции.

Посмотрим еще один пример того, как сделать слайдер на Тильде из зероблоков. Это будет слайдер, который можно листать мышкой или на тачпаде:

1. Создаем зероблок и добавляем контент (например, карточки товаров).

2. Задаем каждому элементу фиксированную ширину (например, 260px + отступ 40px).

3. Очень важно: стрелки размещаем отдельно, а не внутри блока со слайдами, иначе они будут двигаться при скролле, а нам этого не нужно.

4. Переходим в Нолим, выбираем «‎Горизонтальный блок со стрелками в зероблоке». Именно отсюда мы будем брать CSS-классы для наших элементов. Если таких блоков на странице несколько, классы можно и нужно менять на свои, иначе слайдер не будет корректно работать.

5. Возвращаемся в Тильду и задаем стрелкам CSS-классы, как указано в Нолим (у нас это leftArrow127 и rightArrow127).

6. Настраиваем размер сдвига (например, по ширине одной карточки). Это важный момент, если вы хотите понять, как сделать карусель в Тильде аккуратной. Обычно мы задаем здесь ширину шейпа (Add Shape), так удобнее. В нашем случае ширина шейпа это 260+40 = 300 px. Делаем его бесцветным и ставим в самый низ по слоям.

7. Этому шейпу тоже нужно задать класс, и взять его нужно в Нолим. В нашем случае это nlmShape127. Возвращаемся в Тильду, кликаем по шейпу, в меню выбираем Add CSS Class Name. В настройках, появившихся справа, вставляем нужное значение в поле CSS CLASS NAME. Не забываем нажать «‎Сохранить».

8. Возвращаемся в Нолим, проверяем, все ли поля заполнены. Не забываем в поле «‎Выберите вариант ширины сдвига» поставить «Задавать размер сдвига шириной/высотой шейпа‎». Теперь нажимаем «Копировать код‎».

9. Возвращаемся в Тильду. Добавляем выше слайдера блок T123 (HTML-код) и вставляем туда код.

Иногда бывает, что в мобильной версии перестает работать свайп. В рекомендациях Нолим написано, что этого можно избежать, если разместить блок с кодом выше блока со слайдером, а не ниже.

10. В настройках к блоку со слайдером важно выбрать Position and overflow → Overflow → Auto. Иначе скролл блока не будет работать.

11. Теперь нажимаем «Опубликовать» и смотрим, что получилось.

Ну тут все просто:

• Если вам нужен быстрый и удобный вариант — используйте стандартные слайдеры;
• Если хотите полный контроль над дизайном — собирайте свой кастомный слайдер в Тильде через зероблок;
• Если не хотите заморачиваться — оставляйте заявку тут, и мы сделаем вам сайт на Тильде. Со слайдерами, галереями, кнопками и перламутровыми пуговицами.