Разработка слайдеров и баннеров на 1С-Битрикс
Стандартный баннер Битрикс — компонент bitrix:advertising.banner, привязанный к модулю рекламы (advertising). Он создавался в эпоху GIF-баннеров и учёта показов/кликов. Для современных задач — полноэкранных слайдеров с анимацией, адаптивных баннерных сеток, видеофонов — он не подходит. Нужна кастомная разработка, которая даёт маркетологу удобное управление через админку, а фронтенду — производительный и гибкий рендеринг.
Почему не стандартный модуль рекламы
Модуль advertising хранит баннеры в таблице b_adv_banner. У каждого баннера — HTML-код, тип контракта (показы/клики), период, привязка к разделам. Модуль считает статистику и управляет ротацией.
Проблемы:
- Редактор баннера — textarea с HTML-кодом. Менеджер без знания вёрстки не сможет менять контент.
- Нет концепции слайдера — модуль оперирует отдельными баннерами, а не упорядоченными наборами слайдов.
- Нет адаптивных изображений — один баннер для всех экранов. На мобильном горизонтальное изображение 1920x600 становится нечитаемым.
- Нет ленивой загрузки, WebP, видеофонов — всё это придётся дописывать поверх.
Инфоблок как хранилище
Практичное решение — отдельный инфоблок «Слайдеры и баннеры». Каждый элемент — один слайд или баннер. Разделы инфоблока — именованные зоны размещения (hero-slider, catalog-banner, sidebar-promo).
Структура свойств элемента:
| Свойство | Тип | Назначение |
|---|---|---|
| IMAGE_DESKTOP | Файл | Изображение для десктопа (1920x600) |
| IMAGE_MOBILE | Файл | Изображение для мобильных (768x900) |
| VIDEO_BG | Файл | Видеофон (MP4, до 5 МБ) |
| TITLE | Строка | Заголовок слайда |
| SUBTITLE | Строка | Подзаголовок |
| BUTTON_TEXT | Строка | Текст кнопки |
| BUTTON_LINK | Строка | Ссылка кнопки |
| BUTTON_TARGET | Список | _self / _blank |
| BG_COLOR | Строка | Цвет фона (fallback при загрузке) |
| TEXT_COLOR | Список | light / dark (для контраста с фоном) |
| SORT | Число | Порядок в слайдере |
Для адаптивных изображений делаем два отдельных свойства, а не одно с ресайзом. Причина: на мобильном нужен не просто уменьшенный десктопный баннер, а принципиально другая композиция — вертикальная, с крупным текстом, другим кадрированием.
Компонент вывода
Компонент local:banner.slider принимает параметры:
-
IBLOCK_ID— инфоблок баннеров. -
SECTION_CODE— код раздела (зона размещения). -
SLIDER_ENGINE— библиотека: swiper, splide, native. -
AUTOPLAY— автопрокрутка (true/false). -
AUTOPLAY_DELAY— интервал в миллисекундах. -
LAZY_LOAD— ленивая загрузка изображений. -
CACHE_TIME— время кэша.
В class.php компонент выбирает активные элементы из нужного раздела, сортирует по SORT, для каждого изображения генерирует WebP-версию через \Bitrix\Main\File\Image\Imagick (или GD) и формирует <picture> с <source>.
Выбор слайдер-библиотеки
Swiper — де-факто стандарт. 140 КБ (minified), поддержка touch, lazy loading, виртуальных слайдов, параллакс-эффектов. Подключается через npm или CDN.
Splide — легковесная альтернатива, 30 КБ. Меньше возможностей, но достаточно для большинства задач. Нет зависимостей.
Нативный CSS-слайдер — scroll-snap-type + scroll-behavior: smooth. Ноль JavaScript для базовой прокрутки. Автопрокрутка и индикаторы потребуют минимального JS. Максимальная производительность, но ограниченная анимация.
Рекомендация: Splide для типовых проектов, Swiper для сложных сценариев (параллакс, вертикальные слайдеры, nested), нативный CSS — для минималистичных проектов с акцентом на скорость.
Оптимизация загрузки
Слайдер на главной — первый визуальный элемент. Его скорость загрузки напрямую влияет на Core Web Vitals (LCP).
Первый слайд — без lazy load. Атрибут loading="eager" и fetchpriority="high" для первого изображения. Остальные слайды — loading="lazy".
Preload первого изображения в <head>:
<link rel="preload" as="image" href="/upload/slider/hero-1.webp"
media="(min-width: 768px)" type="image/webp">
<link rel="preload" as="image" href="/upload/slider/hero-1-mob.webp"
media="(max-width: 767px)" type="image/webp">
Добавляется через \Bitrix\Main\Page\Asset::getInstance()->addString() в компоненте.
Размер изображений. Десктопный баннер 1920x600 в JPEG весит 200-400 КБ. В WebP — 80-150 КБ. AVIF — ещё меньше, но поддержка браузерами пока неполная. Компонент генерирует обе версии и выводит <picture> с fallback.
Видеофон. MP4 с кодеком H.264, разрешение 1280x720, битрейт 1-2 Мбит/с, длительность 5-10 секунд. Атрибуты <video>: autoplay muted loop playsinline. На мобильных видео заменяется статичным изображением — экономия трафика и батареи. Определяется через matchMedia('(max-width: 768px)').
Управление для маркетолога
Менеджер работает в привычном интерфейсе инфоблока: создаёт элемент, загружает изображения, заполняет текстовые поля, ставит даты активности. Предпросмотр — через кнопку «Просмотр» элемента инфоблока с кастомным шаблоном.
Сортировка слайдов — drag-and-drop в списке элементов (если включена визуальная сортировка в настройках инфоблока) или через поле SORT.
Сроки
| Вариант | Состав | Срок |
|---|---|---|
| Один слайдер | Инфоблок, компонент, Splide, адаптив, WebP | 3-5 дней |
| Баннерная система | Несколько зон, видеофоны, preload, аналитика кликов, A/B-тестирование | 8-12 дней |