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

<!-- 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>