Вкладки из меню ME606 и Swiper в Tilda

От /

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

В этой статье мы расскажем, как создать эффективные и удобные табы либо вкладки, используя меню ME606 и Swiper

В этой статье мы представим вам пример табов, который пообтает с функцией Scalse. Для создания вкладок мы используем блок “ME606” в качестве табов, а содержимым будут Zero-блоки. Эта модификация очень проста в реализации: вам просто нужно заменить идентификаторы блоков в коде, и ваш проект будет готов!

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

Tab 1
Tab 2
Tab 3

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

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

  1. Создаём Zero блок
  2. Создаем в нем шейп (либо HTML блок) с высотой и шириной 100%
  3. Выравниваем относительно window
  4. Присваиваем класс anku-tabs-slider
  5. Создаём меню ME606, задаем ему класс uc-tabs
  6. Создаём Zero блоки с контентом, задаем им класс uc-slide
  7. Создаем T123 и вставляем в него код
  8. Публикуем страницу

Код примера для Т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>
  $('.anku-tabs-slider').addClass('swiper-container');
  var box = $('.anku-tabs-slider .tn-atom').addClass('swiper-wrapper');
  $('.uc-slide').addClass('swiper-slide').appendTo(box);
  $('.uc-tabs .t976__list-item:first a').addClass('t-active');
  $('.uc-tabs .t976__list-item').click(function(e) {
    e.preventDefault();
    number = $('.t976__list-item').index(this);
    $('.uc-tabs .t976__list-item a').removeClass('t-active');
    $('.uc-tabs .t976__list-item:eq(' + number + ') a').addClass('t-active');
    $('.swiper-slide div[data-animate-sbs-event="blockintoview"]').removeClass('t-sbs-anim_started');
    AnkuTabsSlider.slideTo(number + 1);
    setTimeout(function() {t_lazyload_update()}, 100);
    AnkuTabsSlider.update()
  });

  var AnkuTabsSlider = new Swiper(".anku-tabs-slider", {
    spaceBetween: 40,
    loop: true,
    centeredSlides: true,
    slidesPerView: 1,
    spaceBetween: 40,
    allowTouchMove: false,
  });

  AnkuTabsSlider.on('slideChange', function() {
    setTimeout(function() {
      $('.swiper-slide-active div[data-animate-sbs-event="blockintoview"]').addClass('t-sbs-anim_started');
    }, 300);
  });
</script>

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

  .swiper-wrapper {
    display: flex !important;
  }
</style>

Чат поддержки
Чат поддержки