Табы из Zero блок Swiper в Tilda

Пожалуйста, внимательно и пошагово выполняйте инструкцию, во избежание ошибок!

Этот урок прост в реализации и может быть адаптирован для разных проектов, просто заменяя ID блоков в коде.

Пример реализации

В примере использованы блоки с картинками, но вы можете использовать любые блоки, в том числе Zero.

Инструкция по установке

1. Создаем блок навигации (табы) — добавляем кнопки в Zero block
2. Всем кнопкам задаем класс tab
3. Поочередно каждой кнопке задаем ссылку #1, #2, #3 и так далее
4. Создаем блоки с контентом. Могут быть стандартные либо Zero
5. Задаем каждому блоку класс uc-slide
6. Добавляем T123 и вставляем в него стили
7. Добавляем еще один T123 и вставляем в него код HTML разметки
8. Добавляем третий T123 и вставляем в него скрипт

Первый Т123 — стили

<style>
 .mySwiper.swiper-container {
   position: absolute;
   display: block;
   margin: 0 !important;
   overflow: hidden !important;
 }

 .swiper-wrapper {
   display: flex !important;
 }

 /* Стили активной кнопки */
 .tab .tn-atom.active {
   background-image: linear-gradient(180deg, rgba(110, 84, 227, 1) 0%, rgba(176, 180, 238, 1) 100%);
 }
</style>

Второй T123 — HTML структура

<div class="swiper mySwiper">
  <div class="swiper-wrapper"></div>
  <div class="swiper-pagination"></div>
</div>

Третий Т123 — скрипты

<!-- Подключаем библиотеку плагина -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
    const tabSl = '.tab .tn-atom';  // Класс кнопки
    const slides = '.uc-slide';
    const box = '.mySwiper .swiper-wrapper';
    
    // Инициализация Swiper
    const swiper = new Swiper(".mySwiper", {
      slidesPerView: 1,
      loop: true,
      allowTouchMove: false, // Отменяем свайпинг и перемещение мышью
    });
    
    // Обработчик клика на кнопках
    $(tabSl).click(function(e) {
      e.preventDefault();
      const number = $(this).attr('href').replace('#', '');
      swiper.slideTo(number - 1);
      $(tabSl).removeClass('active');
      $(this).addClass('active');
    });
    
    // Обработчик изменения слайда
    swiper.on('slideChange', function() {
      setTimeout(() => {t_lazyload_update()}, 100);
    });
    
    $(slides).addClass('swiper-slide').appendTo(box);
    $(tabSl).eq(0).addClass('active');
</script>