Бортовой журнал Ктулху
За справку, что я не алкоголик поставил наркологу ящик водки...

Owl carousel для Битрикса

Есть очень хороший и любимый мною слайдер Owl Carousel.

И сегодня я напишу как его интегрировать в Битрикс.

 

Для начала создаем инфоблок, например "Слайдер", в нем создаем дополнительное поле, например SLIDER_IMAGE.

При помощи функции GetList выводим содержимое этого инфоблока.

Сначала подключаем Jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Затем вставляем код, например в header.

<div id="slider-container">
<div id="owl-demo" class="owl-carousel">
 <?
 if(CModule::IncludeModule("iblock")) {
 $arSelect = Array();
 $arFilter = Array("IBLOCK_ID"=>11, "ACTIVE_DATE"=>"Y", "ACTIVE"=>"Y");
 $res = CIBlockElement::GetList(Array(), $arFilter, false, false, $arSelect);
 while($ob = $res->GetNextElement()) {
 $arFields = $ob->GetFields();
 $arProps = $ob->GetProperties();
 $img = CFile::ResizeImageGet($arProps[SLIDER_IMAGE][VALUE], array('width'=>970, 'height'=>350), BX_RESIZE_IMAGE_EXACT, true); 
 echo '<div class="item"><img src="'. $img[src] .'" alt="The Last of us"></div>';
 }
 }
 ?> 
 </div>
 <style>
 #owl-demo .item img{
 display: block;
 width: 100%;
 height: auto;
 }
 </style>
 <script>
 $(document).ready(function() {
 $("#owl-demo").owlCarousel({
 
 slideSpeed : 300,
 paginationSpeed : 400,
 singleItem : true,
 autoPlay : 3000,
 navigation : false,
 navigationText : ["prev","next"],
 rewindNav : true,
 scrollPerPage : false,
 pagination : false,
 paginationNumbers: false
 
 });
 });
 </script>
</div>

Не забываем указать ID инфоблока.

Также не забываем про скрипты и стили самого слайдера.

Рейтинг@Mail.ru
Яндекс.Метрика
Hosting Ukraine
Счетчик PR-CY.Rank
Счетчик PR-CY.Rank