Битрикс как создать слайдер

Краткая инструкция как создать свой слайдер для CMS 1С-Битрикс. Подойдет для тех, у кого не получается создать простейший внешний вид для компонента “новостей”.

Как создать слайдер из инфоблока на Битриксе

Предположим, что, вы уже хорошо знакомы с вёрсткой, скриптами (javasctipt и jQuery), и понимаете что такое слайдер. Будет плюсом, если вы уже знакомы с битриксом и инфоблоками.

Создать свой слайдер не так уж и сложно, нужно выполнить несколько простых действий:

1 Шаг: Создаем новый инфоблок в админке. Если вы только начинаете работать с проектом, то перед этим нужно создать новый тип инфоблока, например, назовем его Контент с кодом content. При создании нового инфоблока удаляем правила ЧПУ, название, символьный код, и не забываем выставить необходимые права доступа. Если вы планируете дальнейшее создание информационной структуры (имею ввиду переходы по ссылкам относительно /slider/), то указываем правила для ЧПУ. Не забываем и задать галочки для транслитерации и ресайза изображений (можно поставить максимальную ширину, чтобы урезать картинки).

2 Шаг: Создаем демо контент для слайдера, состоящий из названий и изображений, этого вполне хватит для простейшего слайдера. Картинка для анонса подойдет.

3 Шаг: На тестовой странице выводим компонент news.list, ставим в настройках нужный нам инфоблок, количество новостей и обязательно создаем для него свой шаблон, например slider. После этого записываем в шаблон такой код:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
 
<div class="gallery">
    <ul class="images">
    <?foreach($arResult["ITEMS"] as $arItem):?>
        <?if(is_array($arItem["PREVIEW_PICTURE"])):?>
            <li<?if($arItem["NAME"]=="1"):?> class="show"<?endif;?>><img width="950" height="300" src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" alt="photo_<?=$arItem["NAME"]?>" /></li>
         <?endif;?> 
    <?endforeach;?>
    </ul>
</div>

Вот и все, теперь вам необходимо только подключить скрипты и заменить стили на свои. После всех проделанных действий, останется только перенести код вызова компонента в тот участок сайта или шаблона, в котором он и задумывался.

Данная последовательность подходит под очень многие задачи связанные с инфоблоками, берите на вооружение и создавайте свои слайдеры легко и быстро 🙂 .