Создаем слайдер в Тильде из ZeroBlock (зеро блок) и html

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

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

Поэтому для тех, кто как и я столкнулся с искажением последнего слайда – добро пожаловать. Ниже пошагово дам готовое решение.

Но если вам нужен слайдер который расположен внутри другого zero block, то вам сюда:

А теперь начнем создавать слайдер в стандартном html блоке.

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

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

Верстаем наш слайдер

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

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

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

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

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

3. Определились с количеством элементов (в примере 2 штуки), теперь приступим к созданию ZeroBlock слайдов. Здесь все просто, готовим наш дизайн, делам адаптацию ко всем форматам экранов. Никаких особых вещей делать не нужно. Все параметры сетки и расположения по дефолту. Делаем блоков столько, сколько определили выше. Ниже пример слайда на ZeroBlock

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

Структуру в HTML блоке мы прописали, дизайн самих слайдов (2 в примере) сделали. Теперь нужно провести активацию. Для начала нужно использовать вот такой код:

<!-- Переносим ZeroBlock (их ID) каждый в свой слайд-->
<script>
$("#rec532602181").appendTo(".mySwiper1 .swiper-wrapper .slide1");
$("#rec532602980").appendTo(".mySwiper1 .swiper-wrapper .slide2");
</script>

Итак, #rec532602181 – это ID нулевого блока нашего первого слайда (картинка – пример, как раз выше по тексту), #rec532602980 – это ID нулевого блока второго слайда. Все ID номера можно посмотреть в настройках ZeroBlock

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

Теперь нужно прописать следующий код:

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

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

Оформляем кнопки навигации

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

<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);
}
</style>

Слайдер в Тильде и удобная структура

Напоследок покажу как правильно или удобнее располагать все элементы на странице.

Сначала стартует 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>

Далее уже HTML блок с кодом самого слайдера

Далее идут сами слайды из ZeroBlock (нулевой блок). Первый слайд:

Второй слайд

И в самом низу страницы, в одном стандартном HTML блоке вставляются все оставшиеся коды или как в текущем примере:

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

<!-- Переносим ZeroBlock (их ID) каждый в свой слайд-->
<script>
$("#rec532602181").appendTo(".mySwiper1 .swiper-wrapper .slide1");
$("#rec532602980").appendTo(".mySwiper1 .swiper-wrapper .slide2");
</script>
<!-- Конец слайдера с именем mySwiper1 c влево, вправо, буллеты -->

<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);
}
</style>

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

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

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

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

Еще на сайте

Варианты слайдеров

Вариант бесконечный слайдер. Для этого в коде инициализации прописываем строчку loop: true,

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

Вариант автоматический бесконечный слайдер + задержка на 5 секуд. Для этого в коде инициализации прописываем строчку autoplay: {delay: 5000,}, Где 5000 это значение задержки в милисекундах

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

Если вам нужен слайдер который расположен внутри другого zero block, то вам сюда