Карусель в Zero block на Owl Carousel

В данную карусель можно помещать любые элементы сайта на Tilda

UPD! Добавил видео в конце статьи.

Owl Carousel - один из самых популярных плагинов карусели на jQuery. Если у вас появилась необходимость разместить слайдер на вашем сайте Tilda, то данное решение прекрасно справится с задачей. Ведь в данную карусель вы можете поместить практически любой контент. В этой статье я покажу, как превратить содержимое любого Zero block в слайд карусели.

Пример карусели в Zero block

В примере я разместил несколько Zero block с разным наполнением для наглядности, чтобы было понятнее о чем речь.

Как сделать слайдер из Zero Block в Tilda

Создаем Zero block, внутри которого добавим элемент "shape" и присваиваем ему css класс нашей карусели. Shape станет областью, в которой будет размещен слайдер. Поэтому при оформлении учтите, что этот блок должен быть на верхнем слое, а его ширина и высота должна вмещать ваши будущие слайды.

Как добавить свой css класс элементу в Tilda

Добавляем кнопки, если они вам нужны. Ими может стать любой элемент на странице, в примере я использовал 2 иконки svg. Прикрепляем к кнопкам ссылки из примера.

Создаем Zero block, который станет слайдом. Добавьте в него содержимое и адаптируйте. Выравнивание элементов должно быть относительно window container с позицией left и top (см. изображение), в противном случае область слайдера не отобразит блок.

Позиционирование элементов в zero block tilda

После того как создали и адаптировали первый слайд, можете делать его копии и менять контент - это ускорит процесс, т.к. элементы в копии уже будут адаптированы, как в исходном блоке. Если используете изображения, то отключайте lazy-load у данных элементов, т.к. есть шанс, что изображения в скрытых блоках просто не загрузятся.

создание слайдов для карусели в zero block tilda

Добавляем на страницу блок Т123 и вставляем код, опубликовываете страницу - карусель работает. Следите за комментариями в коде, они помогут не допустить ошибок.
Обратите внимание на адаптив, кол-во слайдов в первых 2-х брейкпоинтах Тильды одинаковое, поэтому при размещении 3-х и более слайдов адаптируйте размер элементов согласно ширине shape. Калькулятор всем в помощь:)

Если кратко, то последовательность действий такая:

Копируем код на сраницу в блок Т123;
Создаем Zero block, в котором будет карусель;
Заменяем в коде мой id на id вашего Zero block;
В блоке создаем "Shape" и присваиваем ему css класс anku-slider;
Добавляем Zero block, который будет слайдом, адаптируем, создаем копии, наполняем контентом;
Заменяем id слайдов в коде на свои;
Публикуем.

<!-- AnKu Zero block slider with Owl carousel plugin-->

<!--
Подключаем плагин
Советую использовать только на тех страницах,
где предполагается карусель, чтобы не грузить
лишние скрипты и стили на остальных страницах.
-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<!-- Скрипт для размещения карусели в области shape -->
<script>
  $(document).ready(function() {
    var block = $('#rec250132109'); // id Zero block
    var wrap = $('.anku-slider'); // область карусели
    //- этот класс добавляем к шейпу, если на странице планируется 2 карусели,
    //то класс второй должен отличаться, чтобы не заморачиваться,
    //добавьте порядковое число к классай, не делая пробела
    var slides = $('#rec250132944, #rec250144462, #rec250147612, #rec250148337, #rec250149559'); // id Zero block слайдов

    var box = wrap.find('.tn-atom');
    box.append('<div class="owl-carousel owl-theme"></div>');
    slides.appendTo(block.find('.owl-carousel'));
    var owl = wrap.find('.owl-carousel').owlCarousel({
      // настройки карусели, больше на официальном сайте плагина, их более 60шт., я добавил стоковые.
      // просто берете настройки из документации и добавляете в этот список, соблюдайте синтаксис, иначе перестанет работать.
      loop: true, // true/false - бесконечная прокрутка
      center: false, // true/false - центрирование
      dots: false, // true/false - точки под слайдами
      nav: false, // true/false - стандартная навигация
      margin: 10, // any value in px - внешний отступ сежду слайдами в пикселях
      items: 4, // кол-во слайдов
      responsive: { // количиство отображаемых слайдов в зависимости от разрешения дисплея
        0: {
          items: 1
        },
        640: {
          items: 1
        },
        1000: {
          items: 1
        },
      }
    })


    block.find("[href='#anku_left']").click(function(e) { // добавьте эту ссылку к кнопке, отвечающей за прокрутку влево (назад)
      e.preventDefault();
      owl.trigger('prev.owl.carousel');
    })
    block.find("[href='#anku_right']").click(function(e) { // добавьте эту ссылку к кнопке, отвечающей за прокрутку вправо (вперед)
      e.preventDefault();
      owl.trigger('next.owl.carousel');
    })
  });
</script>



<style>
  /* Добавьте высоту слайдов на разных разрешениях дисплея */

  /* xl */
  .anku-slider .t-rec .t396__artboard {
    width: 100% !important;
    height: 350px !important;
    word-break: normal !important;
    background: transparent !important;
  }

  /* lg */
  @media screen and (max-width: 1199px) {
    .anku-slider .t-rec .t396__artboard {
      height: 310px !important;
    }
  }

  /* md */
  @media screen and (max-width: 959px) {
    .anku-slider .t-rec .t396__artboard {
      height: 310px !important;
    }
  }

  /* sm */
  @media screen and (max-width: 639px) {
    .anku-slider .t-rec .t396__artboard {
      height: 350px !important;
    }
  }
  /*
  @media screen and (max-width: 479px) {
    .anku-slider .t-rec .t396__artboard {
      height: 350px !important;
    }
  }
*/
  .anku-slider {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
  }

  .anku-slider .t-rec,
  .anku-slider .t396__artboard {
    overflow: hidden !important;
  }

  /* hide filters */
  .anku-slider .t-rec .t396__artboard>.t396__carrier,
  .anku-slider .t-rec .t396__artboard>.t396__filter {
    display: none !important;
  }
</style>