Html код для слайдера тильда

Как сделать слайдер в Тильде внутри Zero block

Zero block tilda — это фантастический инструмент для интеграции пользовательских слайдеров в дизайн сайта. Он не только позволяет создавать слайды для демонстрации контента, но и позволяет контролировать его полный функционал. С помощью нулевого блока tilda можно создать карусельный слайдер, чтобы посетители не отвлекались и оставались дольше на вашем сайте. По своей сути добавить такой слайдер внутрь Zero block довольно просто, нужно ли шишь использовать несколько строк кода и понимание того, какие габариты слайдов должны быть. Я уже писал о внедрении рабочего слайдера на страницу . Но в этой статье будет размещение слайдера внутри нулевого блока. А это немного другой формат.

Если вы заинтересованы в в вопросе Как сделать слайдер в зеро блоке Тильда, то вот несколько шагов, которые необходимо выполнить:

Подключаем открытую библиотеку слайдера

1. Чтобы это сделать воспользуйтесь кодом ниже и вставьте его в простой HTML блок

Кому интересно, в решение я использую открытую библиотеку SWIPER при должном желании вы сможете провести свою собственную кастомизацию.

Обновление от 06.06.2023

Дело в том, что Тильда постоянно улучшает скорость загрузки своей платформы. Это очень хорошо, но под раздачу попадает множество собственных скриптов, загрузка которых начинает откладываться. Так и здесь, если вы столкнулись с тем, что после выполнения всех действий, согласно инструкции, слайдер не работает, то перенесите данный код в самый верх страницы или разместите его через настройки проекта в разделе HEAD

Размещаем слайдер внутри zero block

2. Создаем HTML блок для нашего слайдера и помещаем его внутрь нулевого блока туда куда вам нужно. Структура верстки следующая:

Пример размещения html блока для компьютера

Пример размещения html блока для мобильной версии

Разберем подробнее. mySwiper1 – это имя слайдера, к которому потом будет обращаться код. Если у вас два слайдера, то второй соответственно будет иметь имя mySwiper2. Я как всегда, люблю оригинальность и уникальность. Класс slide1, slide2 и т.д – это как вы понимаете слайд 1, слайд 2. Если нужно еще слайдов добавить, то копируйте всю строчку целиком и меняйте цифру в этом классе.

swiper-pagination – это класс для отображения буллетов снизу, если удалить эту строчку, то у вас не будет внизу точек указывающих на количество слайдов в слайдере, простите уж за тофталогию

swiper-button-next – это класс, который отвечает за наличие кнопки для листания вперед. Соответственно prev – назад

3. Теперь нужно определиться с количеством слайдов и габаритам слайдера под каждый экран. Будем считать что нам нужно 7 слайдов. А габариты слайдов будут такими:
– для ширины экрана от 480px до 1200 px габариты будут 400px ширина и 400px высота
– для ширины экрана до 480px габариты будут 300px ширина и 400px высота

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

Готовим zero block слайды

1. Так как выше в пункте 3 мы определились с размерами слайдов, то создаем новый zero block. Устанавливаем высоту контейнера в 400px для всех экранов. В качестве background-color устанавливаем пустоту.

2. Создаем нужные нам блоки, делаем дизайн и т.д. Однако нужно обратить внимание что для всех экранов кроме мобильного (480px) я ставлю размеры: 400px ширина и 400px высота. Обратите внимание:

• Для всех элементов выбрано позиционирование относительно экрана Windows Container (Left, Top)
• Общая структура блоков расположена с самого левого края. Это сделано для того чтобы корректно отображать данный слайд внутри самого слайдера

Для мобильной версии ширина слайда будет другой, в моем примере это 300px. Но вся композиция выравнивается так же к левому верхнему краю. Высота слайда так и осталась 400px

3. Адаптируем для всех экранов и далее просто дублируем блоки. и уже в каждом создаем свой контент

Активируем слайдер

HTML структуру разместили внутри нулевого блока, сами слайды создали (в моем примере 7 штук). Теперь пришло время включения слайдера

1. Для этого у каждого слайда (нулевого блока) копируем ID блока и за счет кода переносим в слайдер

Итак, #rec549157243 – это ID нулевого блока нашего первого слайда, #rec549432944 – это ID нулевого блока седьмого слайда. Все ID номера можно посмотреть в настройках ZeroBlock

slide1 … slide7 – это классы которые мы ранее прописывали в HTML структуре, mySwiper1 – это название нашего слайдера для Тильды.

2. Теперь прописываем код инициализации слайдера

В предыдущей статье не было данной строчки clickable: true, Она означает что точки, которые показывают количество слайдов будут кликабельными и переключать на свой номер слайда

3. Осталось совсем не много. Система пока еще не знает стили оформления. Поэтому нужно прописать CSS код для задания габаритов слайдов + оформления кнопок

Слайдер внутри zero block готов, вот что получилось для компьютера

А вот что получилось для телефона

Наконец, когда все будет проверено, опубликуйте сайт и наслаждайтесь его новым ярким дополнением! Как лучше расположить блоки на странице, читайте здесь:

В данной статье разберем как создать слайдер из zeroblock слайдов при помощи стандартного html блока + варианты слайдеров (бесконечный, автоматический)

Как со мной связаться

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

Пишите https://t.me/vbalakin буду рад помочь с доработкой.

Еще на сайте

Подробно и пошагово расскажу о том, как создать онлайн – школу на Тильда, причем это сможет сделать даже новичок

Источник

Как сделать слайдер на Тильде из зеро-блоков

Приветствую! Подробная текстовая инструкция к видео о том, как сделать не полноэкранный слайдер на Tilda из zero-блоков.

Этапы создания слайдера

1. Создать зеро-блок и добавить в него необходимый контент. Это может быть что угодно: текст, изображения, различные элементы
2. В этом же zero-блоке создать шейп (shape), внутри которого будут находиться наши слайды. Разместить его в нужной части блока, где должен быть слайдер. Обязательно задать lazy-load: off, а также убрать заливку. Высота и ширина шейпа должны совпадать с высотой и шириной слайдов. Если слайды будут больше по размеру, чем шейп, то контент обрежется
3. Создать элементы для переключения слайдов. В моем примере на видео были стрелки. Вы можете создать точки, фигуры и т. д. Задать левой стрелке ссылку «#slider_left», а правой — «#slider_right». Как и для шейпа, задать lazy-load: off.
4. Создать слайды из зеро-блоков. У меня это 3 zero-блока, в которых находится по 2 карточки товаров. Обязательно всему контенту внутри зеро-блока задать выравнивание по window-контейнеру, а также «left» по оси X и «top» по оси Y. Это можно сделать в настройках элемента в правой панели
5. Добавить код. Я за основу брал код с сайта Тильдошной
6. Проставить 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

Создаём слайдер-переключатель из нескольких разных элементов в одном ZeroBlock
Длительность видео: 33 минуты

  .tabmode < opacity:0.1; >.sldelem < cursor:default; >.btntab, .butsld  

Источник