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

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

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

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

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

<!-- Подключаем библиотеку слайдера -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

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

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

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

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

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

<!-- Слайдер с именем mySwipe1-->
<div class="swiper mySwiper1">
    <div class="swiper-wrapper">
        <div class="swiper-slide slide1"></div>
        <div class="swiper-slide slide2"></div>
        <div class="swiper-slide slide3"></div>
        <div class="swiper-slide slide4"></div>
        <div class="swiper-slide slide5"></div>
        <div class="swiper-slide slide6"></div>
        <div class="swiper-slide slide7"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

Пример размещения 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 блока и за счет кода переносим в слайдер

<!-- Переносим ZeroBlock (их ID) каждый в свой слайд-->
<script>
$("#rec549157243").appendTo(".mySwiper1 .swiper-wrapper .slide1");
$("#rec549170965").appendTo(".mySwiper1 .swiper-wrapper .slide2");
$("#rec549424489").appendTo(".mySwiper1 .swiper-wrapper .slide3");
$("#rec549424557").appendTo(".mySwiper1 .swiper-wrapper .slide4");
$("#rec549424582").appendTo(".mySwiper1 .swiper-wrapper .slide5");
$("#rec549424600").appendTo(".mySwiper1 .swiper-wrapper .slide6");
$("#rec549432944").appendTo(".mySwiper1 .swiper-wrapper .slide7");
</script>

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

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

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

<!-- Иницилизируем слайдер с именем mySwiper1 c влево, вправо, буллеты-->
<script>
      var swiper = new Swiper(".mySwiper1", {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
</script>

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

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

<style>
/*Настраиваем стиль кнопок влево - вправо*/
.swiper-button-next, .swiper-button-prev{
    color: var(--swiper-navigation-color,#fff);
    background-color:#ddb9e99c;
    border: 1px solid white;
    border-radius: 100%;
    width: 40px;
    height: 40px;
}
.swiper-button-next:hover, .swiper-button-prev:hover{
    background-color: #ffffffb8;
    color: #ddb9e9;
}
.swiper-button-next::after, .swiper-button-prev::after{
    font-size: 1.2em;
}
/*Настраиваем стиль для буллетов*/
.swiper-pagination-bullet-active {
  background: var(--swiper-pagination-color,#779124);
}
.swiper-pagination-bullet{width:20px;height:20px;}

/*Настраиваем габариты слайдера для экранов: компьютер, планшет + скругляем углы, т.к. дизайн слайда у меня круглый border-radius: 26px;*/
.mySwiper1{
	max-width:400px;
	width:400px;
	height:400px;
	max-height:400px;
        border-radius: 26px;
}

/*Настраиваем габариты слайдера для экрана: телефон*/
@media (max-width:480px){
.mySwiper1{
	max-width:300px;
	width:300px;
}
}
</style>

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

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

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

Важный анонс

Я знаю, как трудно найти полезную информацию о промокодах Tilda в этом океане цифрового творчества. Сам, как вед-дизайнер, я сталкивался с нехваткой качественного контента по этой теме.

Я создал цикл мини-уроков — это не просто сборник базовых знаний. Это погружение в тонкости реализации разных схем использования уникальных промокодов на Tilda.

🎓 1 — Урок «Промокод можно активировать только для одного уникального товара» Демонстрация здесь https://web4life.ru/one-promo

🚀 2 — Урок «Промокод можно активировать на группу товаров. Например на 3 из 4-х»: Демонстрация здесь https://web4life.ru/group-promo

🔍3 — Урок «Промокод можно применить если в корзине набрано товаров на сумму больше или равно X» и «Промокод можно применить если в корзине набрано товаров на сумму больше или равно X, а также в корзине должны быть один или несколько определенных товаров» Демонстрация здесь https://web4life.ru/price-promo/

👜 4 — Урок «Несколько промокодов можно применить только каждый на свой  товар или группу товаров» Демонстрация здесь https://web4life.ru/uni-promo

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