Делаем слайдер на «Битрикс»

Разберем типовую задачу, актуальную для 99,99999%  создаваемых сайтов. Как организовать слайдер на «Битрикс»? Приводим пошаговую инструкцию.

1. Инфоблок для элементов слайдера

Прежде всего создадим инфоблок не – товарного типа. Например, типа «Новости». Задаем в разделе «Поля», что заполнение картинки для анонса обязательно. Указываем, что картинка для анонса создается из детальной, если не задана отдельно.

Обязательно настроим специальное свойство для ссылки элемента слайдера:

Ссылка - Строка - Акт - SLIDER_LNK

2. Компонент вывода слайдера

Возьмем за основу компонент списка новостей  bitrix:news.list и настроим. Отключим заголовок страницы, статус 404, включение в цепочку навигации. Получим примерно такой код компонента:

<?$APPLICATION->IncludeComponent(
"bitrix:news.list",
"slider",
Array(
"DISPLAY_DATE" => "Y",
"DISPLAY_NAME" => "Y",
"DISPLAY_PICTURE" => "Y",
"DISPLAY_PREVIEW_TEXT" => "Y",
"AJAX_MODE" => "N",
"IBLOCK_TYPE" => "news",
"IBLOCK_ID" => "4",
"NEWS_COUNT" => "20",
"SORT_BY1" => "ACTIVE_FROM",
"SORT_ORDER1" => "DESC",
"SORT_BY2" => "SORT",
"SORT_ORDER2" => "ASC",
"FILTER_NAME" => "",
"FIELD_CODE" => array("SLIDER_LINK"),
"PROPERTY_CODE" => array("SLIDER_LINK"),
"CHECK_DATES" => "Y",
"DETAIL_URL" => "",
"PREVIEW_TRUNCATE_LEN" => "",
"ACTIVE_DATE_FORMAT" => "",
"SET_TITLE" => "N",
"SET_STATUS_404" => "N",
"INCLUDE_IBLOCK_INTO_CHAIN" => "N",
"ADD_SECTIONS_CHAIN" => "N",
"HIDE_LINK_WHEN_NO_DETAIL" => "N",
"PARENT_SECTION" => "",
"PARENT_SECTION_CODE" => "",
"CACHE_TYPE" => "A",
"CACHE_TIME" => "36000000",
"CACHE_NOTES" => "",
"CACHE_FILTER" => "N",
"CACHE_GROUPS" => "N",
"DISPLAY_TOP_PAGER" => "N",
"DISPLAY_BOTTOM_PAGER" => "N",
"PAGER_TITLE" => "Слайдер",
"PAGER_SHOW_ALWAYS" => "N",
"PAGER_TEMPLATE" => "",
"PAGER_DESC_NUMBERING" => "N",
"PAGER_DESC_NUMBERING_CACHE_TIME" => "36000",
"PAGER_SHOW_ALL" => "N",
"AJAX_OPTION_JUMP" => "N",
"AJAX_OPTION_STYLE" => "Y",
"AJAX_OPTION_HISTORY" => "N",
"AJAX_OPTION_ADDITIONAL" => ""
)
);?>

3. Шаблон слайдера

Создадим отдельную папку для слайдера по адресу
SHABLON/components/bitrix/news.list/slider/

Поместим в эту папку код компонента, HTML-настройки слайдера и JQuery – скрипт Slides.js.

Слайдер будет вызываться кодом:

<?foreach($arResult["ITEMS"] as $arItem):?>
<a href="<?php if(is_array($arItem["DISPLAY_PROPERTIES"]['SLIDER_LINK'])) echo $arItem['DISPLAY_PROPERTIES']['SLIDER_LINK']['VALUE']; else echo '/'; ?>"><img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arItem["NAME"]?>" /></a>
<?endforeach;?>

4. Скрипт Slides.js

Скачиваем скрипт по адресу http://slidesjs.com/. Затем загружаем slides.min.jquery.js в папку шаблона, и переименовываем в slides.js. В папке шаблона создайте папку images и помещайте в нее изображения слайдера. Поместите файл стиля в папку шаблона, присвойте ему имя style.css и отредактируйте пути до картинок.

5. Код шаблона

Код шаблона должен содержать код подобного вида:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<sc ript>
//Slider
$(f unction(){
$('.slider').slides();
});
</sc ript>
<div class="slider">
<div class="slides_container">
<?foreach($arResult["ITEMS"] as $arItem):?>
<a href="<?php if(is_array($arItem["DISPLAY_PROPERTIES"]['SLIDER_LINK'])) echo $arItem['DISPLAY_PROPERTIES']['SLIDER_LINK']['VALUE']; else echo '/catalog/'; ?>"><img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="<?=$arItem["NAME"]?>" /></a>
<?endforeach;?>
</div>
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div> 

-------------------------------
Спасибо за внимание!
Читайте свежий выпуск «Кладовки программиста» каждый день!

Назад в раздел