Owl Carousel 2 и Битрикс. Настройка слайдера

Используем скрипт OwlCarousel 2, потому что он функционален и прост в настройке. Выдерну из рабочего примера, чтобы увидеть принципы.

1. Html и скрипт

<div id="indexBanner" class="owl-carousel owl-theme">
        <?foreach($arResult["ITEMS"] as $key => $item):?>
        <?
        $href = "#";
        if($item["PROPERTIES"]['link_collection']){
            $href = '/collections/?SHOWALL_1=1'.'#'.$item["PROPERTIES"]['link_collection'];
        }
        elseif($item["PROPERTIES"]['link']){
            $href = $item["PROPERTIES"]['link'];
        }
        ?>    
        <div class="item <?if (!$key) :?>active<?php endif;?>">
          <img src="/upload/<?=$item["IMAGE"]['SUBDIR']?>/<?=$item["IMAGE"]['FILE_NAME']?>" alt="" />
        </div>
        <?endforeach;?>
    </div>

<script>
$(document).ready(function(){
    $(".owl-carousel").owlCarousel({
        loop:true,
        items:1,
        autoplay:true,
        autoplayTimeout:7000,
        autoplayHoverPause:true,
        autoplaySpeed:1200,
        pagination: false,
        dots: false,
        navText: false,
        responsive: {
            0:{
                nav:false
            },
            480: {
              nav: true
            }
        }
    });
});
</script>

В настройках у меня прописано: зацикливать слайдшоу, показывать по одной сущности (элементу) в слайдере, включить автопрокрутку, перелистывать каждые 7 секунд, при наведении не перелистывать, скорость перехода 1.2 секунды, не показывать точки в пагинации, не показывать текст для кнопок - следующая и предыдущая, не показывать саму навигацию на маленьких ширинах браузера, а начиная с ширины 480px - уже показывать навигацию.

2. Css

Я не подключаю owl.theme.default.css совсем, а прописываю свои стили. Мне надо, чтобы кнопки переключения слайдов накладывались на сам слайдер и были с картинками стрелочек, для чего использую абсолютное позиционирование и смещения в процентах.

.owl-nav {
  position: absolute;
  width: 100%;
  height: 0px;
  top: 50%;
  z-index: 999;
}
.owl-nav .owl-prev {
    width: 130px;
    height: 160px;
    position:absolute;
    left: 0px;
    top: -80px;
    transition: all 0.2s;
}
.owl-nav .owl-prev:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  width: 30px;
  height: 50px;
  background: url("images/arrow-banner-left.png") 50% 50% no-repeat;
}
.owl-nav .owl-prev:hover, .owl-nav .owl-next:hover  {
  transition: all 0.2s;
  //background-color: #fff;
}
.owl-nav .owl-prev:hover:before {
  background: url("images/arrow-banner-left.png") 50% 50% no-repeat;
}
.owl-nav .owl-next {
  position: absolute;
  right: 0px;
  top: -80px;
  width: 130px;
height: 160px;
  //width: 30px;
  //height: 50px;
  font-weight: bold;
  //background-color: #202020;
}
.owl-nav .owl-next:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  width: 30px;
  height: 50px;
  background: url("images/arrow-banner-right.png") 50% 50% no-repeat;
}
.owl-nav .owl-next:hover:before {
  background: url("images/arrow-banner-right.png") 50% 50% no-repeat;
}

3. Подключаю стили скрипты в шаблоне

В header.php подключаю

$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH."/js/owlcarousel/owl.carousel.min.css");

В footer.php подключаю

<?if($CUR_PAGE == '/'):?>
        <?$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/owlcarousel/owl.carousel.min.js');
        ?>
    <?endif?>

Стили css надо подключать до вызова js.

Пользуйтесь.

Выглядит это дело так: