Есть очень хороший и любимый мною слайдер 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 инфоблока.
Также не забываем про скрипты и стили самого слайдера.
