1
2
3
<!-- 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 = $('#rec344970066'); // id Zero block
    var wrap = $('.anku-slider'); // область карусели
    //- этот класс добавляем к шейпу, если на странице планируется 2 карусели,
    //то класс второй должен отличаться, чтобы не заморачиваться,
    //добавьте порядковое число к классай, не делая пробела
    var slides = $('#rec344970070, #rec344970997, #rec344971029'); // 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: false, // true/false - бесконечная прокрутка
      center: false, // true/false - центрирование
      dots: false, // true/false - точки под слайдами
      nav: true, // true/false - стандартная навигация
      margin: 10, // any value in px - внешний отступ сежду слайдами в пикселях
      items: 3, // кол-во слайдов
      responsive: { // количиство отображаемых слайдов в зависимости от разрешения дисплея
        0: {
          items: 1
        },
        640: {
          items: 1
        },
        1000: {
          items: 1
        },
      }
    })

  });
</script>



<style>
/*Скрыть неактивную кнопку*/
    .owl-next.disabled, .owl-prev.disabled  {
        display: none !important;
    }

/*Стили кнопок*/
    .owl-nav {
        position: absolute;
        width: 100%;
        bottom: -20px;
        font-size: 40px;
    }



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

  /* 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>
Made on
Tilda