Розробка слайдерів і баннерів на 1С-Bitrix
Стандартний баннер Bitrix — компонент 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 днів |