Как сделать слайдер на Тильде из зеро-блоков
Приветствую! Подробная текстовая инструкция к видео о том, как сделать не полноэкранный слайдер на Tilda из zero-блоков.
Этапы создания слайдера
- Создать зеро-блок и добавить в него необходимый контент. Это может быть что угодно: текст, изображения, различные элементы
- В этом же zero-блоке создать шейп (shape), внутри которого будут находиться наши слайды. Разместить его в нужной части блока, где должен быть слайдер. Обязательно задать lazy-load: off, а также убрать заливку. Высота и ширина шейпа должны совпадать с высотой и шириной слайдов. Если слайды будут больше по размеру, чем шейп, то контент обрежется
- Создать элементы для переключения слайдов. В моем примере на видео были стрелки. Вы можете создать точки, фигуры и т. д. Задать левой стрелке ссылку «#slider_left», а правой — «#slider_right». Как и для шейпа, задать lazy-load: off.
- Создать слайды из зеро-блоков. У меня это 3 zero-блока, в которых находится по 2 карточки товаров. Обязательно всему контенту внутри зеро-блока задать выравнивание по window-контейнеру, а также «left» по оси X и «top» по оси Y. Это можно сделать в настройках элемента в правой панели
- Добавить код. Я за основу брал код с сайта Тильдошной
- Проставить ID блоков в html-код. Внутри самого кода на русском написано, где необходимо вставлять ID. Его можно найти в настройках блока. Класс шейпа берется через просмотр кода элемента на сайте. Если что-то в этом шаге не понятно, то на видео я все показываю на промежутке 7:57- 8:20. Также прописываем в конце кода высоту и ширину шейпа, который мы создали на 2 шаге
Адаптация под мобильные устройства:
В мобильной версии не поместится вместить две, три и более карточек. Поэтому 2 варианта:
1. Растянуть шейп вертикально и делать карточки внутри него тоже вертикально друг за другом. Все должно работать, как на ПК. Просто слайдер станет вертикальным и длинным.
2. Сделать горизонтально, чтобы карточки выходили за край устройства. И затем добавить горизонтальный скролл. Таким образом карточки будут листаться на мобильном пальцем горизонтально.
Пример, как это может выглядеть на одном из моих сайтов — linkparty.ru. А сам код для горизонтального скролла — https://romanyu.ru/skroll-s-uderzhaniem-knopki-myshi
Важно, чтобы не конфликтовал код, сделать два блока. Один слайдер для ПК с отображением с 1200рх и до бесконечности с моим кодом выше, а второй до 1200рх и с горизонтальным скроллом
Два и более слайдеров на одной странице:
Если Вы хотите сделать несколько таких слайдеров на одной странице, то не забудьте поменять в новом коде: класс шейпа, ID слайдов, ссылки на стрелки (например, «#slider_left1» и «#slider_right2»), а также ОБЯЗАТЕЛЬНО класс «tildoshnaya-slider-owl» смените на какой-нибудь другой (например, «tildoshnaya-slider-owl1»)
Если остались вопросы или Вы хотите заказать продающий лендинг, то напишите мне в соцсетях или в комментариях под видео.
Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
Всем у кого перестала работать sbs анимация и на странице используется слайдер от Тильдошной (или другой который использует в коде слайдер owl), добавьте в код setTimeout, на скриншоте показаны строки которые добавить.
1) Создаем основной Zero блок и добавляем в него элемент «SHAPE», в котором будет наш слайдер. У «SHAPE» нужно убрать цвет заднего фона, рамки, тени.
2) Добавляем дополнительные несколько блоков, которые будут слайдами. Все элементы в слайдах должны быть выравнены «Container: Window — Left — Top». Положение этих элемента не меняем, всегда в левом верхнем углу, именно эту область будет «видеть» shape в первом блоке. Дополнительные элементы можно перемещать в границах этого элемента.Добавляем контент — изображения (обязательно отключаем lazy load), кнопки, текст, формы.
3) Размеры по высоте shape и элементов — слайдов должны быть одинаковы.
4) Вставляем код в блок T123 после всех Zero блоков действующих в скрипте
указываем вот эти параметры —
/* Указываем высоту слайда */
height: 300px !important;
/* Указываем ширину слайда */
width: 300px !important;
5) Узнаем id блоков, которые будут слайдами, блока в котором будет слайдер и class shape элемента, в основном блоке.
6) Заменяем id и class shape элемента в первых строках нашего кода.
8 строка — Id блока, в котором будет слайдер.
10 строка — class элемента, в котором будет слайдер.
12 строка — id блоков, через запятую, которые должны стать слайдами.
7) В блоке со слайдером добавляем два изображения под стрелочки и указываем им ссылки #slider_left для стрелочки влево и #slider_right для стрелочки вправо.
Настройки слайдера:
21 строка — цикличность слайдера.
25 строка — количество слайдов на одном экране (после изменения надо проверить чтобы все правильно отображалось)
28−43 строки — адаптивность. Можно изменить количество слайдов в мобильной или планшетной версии
(Номера строк будут видны когда разместите код в блок T123, в редакторе)
Как сделать слайдер из нескольких элементов в ZeroBlock в Tilda
Добавили в него элементы и задали им ссылки
— Стрелки — 2 Image — со ссылками #btnleft и #btnright
— Заголовки — 3 Text — со ссылками #sldtitle
— Текст — 3 Text — со ссылками #sldtext
— Число — 1 Text — со ссылкой #sldnumber
— Картинка — Image — со ссылкой #sldpic (отключили им LazyLoad)
— Переключатели — 3 shape — со ссылками #btntab
Добавили код на страницу, в блок Другое ► Т123
В коде прописали ID Zero #rec205684096
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём слайдер-переключатель из нескольких разных элементов в одном ZeroBlock
Длительность видео: 33 минуты
Фрагмент видео
Библиотека для примера
.tabmode < opacity:0.1; >.sldelem < cursor:default; >.btntab, .butsld
Слайдер из Zero block
UPD! Исправлен код, теперь слайды не выпадают !
Если есть вопросы, пишите в ЛС в VK, с вопросом прикладывайте ссылку на страницу, только так я смогу что-либо подсказать.
Ещё один метод сделать слайдер в Tilda, только с применением стандартного блока CR30N. В слайды можно превратить любой блок, включая Zero block. Минус этого слайдера только один — он полноэкранный. Хотя может и не минус, а скорее сужает область применения)). Плюс в том, что не нужно подключать сторонние плагины. Если вам необходим слайдер из мелких элементов, то лучше использовать слайдер из статьи «Карусель в Zero block на Owl Carousel».