Статья

Как вывести слайдер новостей на главной

Как вывести слайдер новостей на главной странице Bitrix: пошаговая инструкция

В этой статье подробно разберём, как вывести слайдер новостей с красивыми карточками на главной странице сайта на 1С-Битрикс. Будет пример на Swiper, вывод через компонент bitrix:news.list с собственным шаблоном, пошаговые действия и примеры кода для быстрого старта.

1. Подготовьте инфоблок с новостями

Для начала убедитесь, что на сайте есть инфоблок для новостей или статей. В инфоблоке должны быть:

Картинка-анонс (PREVIEW_PICTURE)
Название (NAME)
Дата активности (ACTIVE_FROM)
Теги/категория (TAGS или другое текстовое свойство)

Если свойства отличаются — скорректируйте имена в шаблоне.

2. Вызовите компонент `bitrix:news.list` на главной странице

Откройте файл index.php или нужный участок главной страницы и вставьте следующий код для вызова компонента:

<?
$APPLICATION->IncludeComponent(
    "bitrix:news.list",
    "blog_anons", // Название шаблона компонента
    [
        "IBLOCK_ID" => "22", // ID инфоблока новостей
        "IBLOCK_TYPE" => "content",
        "NEWS_COUNT" => "20",
        "SORT_BY1" => "ACTIVE_FROM",
        "SORT_ORDER1" => "DESC",
        "DISPLAY_PICTURE" => "Y",
        "DISPLAY_NAME" => "Y",
        "DISPLAY_PREVIEW_TEXT" => "Y",
        "PROPERTY_CODE" => ["TAGS", ""],
        "DETAIL_URL" => "/blog/#SECTION_CODE#/#ELEMENT_CODE#/",
        // Остальные параметры оставьте по умолчанию или настройте под себя
    ],
    false
);
?>

Параметр blog_anons — это название вашего шаблона компонента. Его мы создадим далее.

3. Создайте шаблон компонента `blog_anons`

Создайте папку /local/templates/ВАШ_ШАБЛОН/components/bitrix/news.list/blog_anons/.
В ней создайте файл template.php со следующим содержимым:

<?php if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); ?>
<section class="section slider articles">
    <div class="container">
        <h2 class="slider__title section-title">Полезные статьи</h2>
        <div class="swiper slider__swiper swiper-initialized swiper-horizontal swiper-backface-hidden">
            <div class="swiper-wrapper">
                <?foreach($arResult["ITEMS"] as $arItem):?>
                    <div class="slider__slide swiper-slide">
                        <a href="<?=$arItem["DETAIL_PAGE_URL"]?>" class="article-card">
                            <?if(is_array($arItem["PREVIEW_PICTURE"])):?>
                                <img class="article-card__image"
                                     src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"
                                     alt="<?=$arItem["NAME"]?>">
                            <?endif;?>
                            <?php
                                $tag = "";
                                if (!empty($arItem["DISPLAY_PROPERTIES"]["TAGS"]["DISPLAY_VALUE"])) {
                                    $tag = is_array($arItem["DISPLAY_PROPERTIES"]["TAGS"]["DISPLAY_VALUE"])
                                        ? $arItem["DISPLAY_PROPERTIES"]["TAGS"]["DISPLAY_VALUE"][0]
                                        : $arItem["DISPLAY_PROPERTIES"]["TAGS"]["DISPLAY_VALUE"];
                                }
                            ?>
                            <?if($tag):?>
                                <div class="article-card__tag"><?=$tag?></div>
                            <?endif;?>
                            <div class="article-card__title"><?=$arItem["NAME"]?></div>
                            <?if($arItem["DISPLAY_ACTIVE_FROM"]):?>
                                <div class="article-card__date"><?=FormatDate("d F Y", MakeTimeStamp($arItem["DISPLAY_ACTIVE_FROM"]))?></div>
                            <?endif;?>
                        </a>
                    </div>
                <?endforeach;?>
            </div>
        </div>
        <div class="slider__navigation articles__more">
            <a href="/blog/" class="articles__more-link">смотреть все</a>
        </div>
    </div>
</section>

В этом шаблоне:

Каждая карточка — это ссылка на детальную страницу.
Выводится картинка, тег (категория), заголовок, дата.
Кнопка "смотреть все" ведёт к списку всех статей.

4. Подключите Swiper (если ещё не подключён)

Если на сайте ещё нет Swiper.js, его нужно подключить. В большинстве случаев Swiper уже есть, но вот пример:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

Инициализация слайдера (например, в файле scripts.js):

document.addEventListener('DOMContentLoaded', function() {
    new Swiper('.slider__swiper', {
        slidesPerView: 3,
        spaceBetween: 24,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            1200: { slidesPerView: 3 },
            900: { slidesPerView: 2 },
            0: { slidesPerView: 1 }
        }
    });
});

5. Проверьте результат

Перейдите на главную страницу. Должен появиться блок со слайдером новостей/статей в нужном оформлении. Если что-то не отображается:

Проверьте правильность названия шаблона (blog_anons).
Убедитесь, что инфоблок содержит нужные свойства.
Проверьте, что Swiper подключён, и слайдер работает корректно.

Примеры

Пример вызова компонента на главной:

<?$APPLICATION->IncludeComponent(
    "bitrix:news.list",
    "blog_anons",
    [
        "IBLOCK_ID" => "22",
        "IBLOCK_TYPE" => "content",
        // ...
    ],
    false
);?>

Пример структуры шаблона template.php:

<section class="section slider articles">
    <div class="container">
        <h2 class="slider__title section-title">Полезные статьи</h2>
        <div class="swiper slider__swiper">
            <div class="swiper-wrapper">
                <!-- карточки статей -->
            </div>
        </div>
        <div class="slider__navigation articles__more">
            <a href="/blog/" class="articles__more-link">смотреть все</a>
        </div>
    </div>
</section>

FAQ

Как изменить количество карточек в слайдере? — Настройте slidesPerView при инициализации Swiper.
Где менять путь к странице всех статей? — В ссылке <a href="/blog/"> в шаблоне.
Если нужно вывести не все статьи, а только по тэгу/разделу? — Используйте параметр FILTER_NAME и фильтр в вызове компонента.
Вёрстка ломается/нет слайдера? — Проверьте, что Swiper подключён только один раз и нет конфликтов с другими слайдерами или классами.

Теперь вы легко сможете вывести современный слайдер новостей на главной, используя стандартные средства Bitrix и ваши фирменные стили.

#блог