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

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

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

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

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

Слайдер в Тильде при помощ зеро блок

Создадим слайдер который будет расположен внутри 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

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

Важный анонс

Я знаю, как трудно найти полезную информацию о промокодах 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 буду рад помочь с доработкой.

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

Вариант бесконечный слайдер. Для этого в коде инициализации прописываем строчку 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, то вам сюда

Слайдер в Тильде при помощ зеро блок

Создадим слайдер который будет расположен внутри zero block. Это позволит вам лучше его кастомизировать

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

Еще материалы

Комментарии

  1. Анна сказал:

    Вроде все сделала по инструкции, но слайдер на странице вообще не отображается(

    • webvova сказал:

      День добрый. Все работает это 100%, однако, чтобы понять в чем проблема у вас, напишите мне в личные телеграм (на сайте есть ссылка в подвале и в меню), подскажу где может быть ошибка

  2. HCKRMN сказал:

    Было бы здорово добавить автоматическое перелистывание и цикличность(чтобы после последнего слайда показывался первый).
    А так автору больше спасибо, все четко работает!

    • webvova сказал:

      Спасибо за комментарий. Но в статье есть вариант в самом низу, это и есть бесконечный слайдер + автопролистывание. Даже задержка:-)

  3. Дарья сказал:

    Все отлично работает! эти видео сильно помогли в проекте и автор лично отвечает в телеграмме, за что отдельный респект!)

  4. Яков сказал:

    Все прекрасно работает. Единственный человек, который подробно и внятно разъяснил все моменты для человека, который вообще в коде не сечет)

    Был вопрос по кастомизации. Списались с Владимиром, он также разъяснил все моменты и теперь все пашет, как надо!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *