Розробка слайдерів і банерів на 1С-Бітрікс
Ми займаємося кастомною розробкою слайдерів і банерів на 1С-Бітрікс більше 4 років. За цей час ми накопичили досвід, який дозволяє створювати продуктивні та зручні в управлінні рішення. Стандартний компонент bitrix:advertising.banner не підходить для сучасних вимог: адаптивність, відеофони, lazy loading, WebP. Замість нього ми використовуємо інфоблоки та власні компоненти, що дають маркетологу повний контроль через адмінку, а фронтенду — швидкий рендеринг. Обмеження модуля реклами стають критичними при розробці повноекранного слайдера на головній або динамічної банерної сітки в каталозі. Наприклад, менеджер не може замінити зображення, не знаючи HTML, а мобільна версія виглядає як зменшена копія десктопу. Наш підхід вирішує ці проблеми, економить бюджет клієнта на доопрацюваннях і прискорює завантаження сторінки на 30–50%.
Кастомна розробка слайдерів і банерів: ключові рішення
Чому стандартний модуль реклами не підходить?
Модуль advertising в 1С-Бітрікс зберігає банери в таблиці b_adv_banner. Кожен банер — це HTML-код у полі MESSAGE. Недоліки:
- Редактор — textarea, менеджер без навичок верстки не може змінити контент.
- Немає слайдера: кожен банер незалежний, немає впорядкованості.
- Немає адаптивних зображень: один банер для всіх екранів.
- Немає підтримки сучасних форматів (WebP, AVIF) і лінивого завантаження.
Всі ці обмеження вирішуються кастомною розробкою з використанням інфоблоків.
Як ми це робимо: інфоблок + компонент
Практичне рішення — окремий інфоблок «Слайдери та банери». Кожен елемент — один слайд, розділи — зони розміщення (hero-slider, catalog-banner тощо). Структура властивостей:
| Властивість | Тип | Призначення |
|---|---|---|
| IMAGE_DESKTOP | Файл | Зображення для десктопу |
| IMAGE_MOBILE | Файл | Зображення для мобільних |
| VIDEO_BG | Файл | Відеофон (MP4) |
| TITLE | Строка | Заголовок |
| SUBTITLE | Строка | Підзаголовок |
| BUTTON_TEXT | Строка | Текст кнопки |
| BUTTON_LINK | Строка | Посилання |
| BG_COLOR | Строка | Колір фону |
| TEXT_COLOR | Список | light / dark |
| SORT | Число | Порядок |
Компонент local:banner.slider приймає параметри: IBLOCK_ID, SECTION_CODE, SLIDER_ENGINE (swiper, splide, native), AUTOPLAY, LAZY_LOAD, CACHE_TIME. У class.php вибираються активні елементи, генеруються WebP-версії, виводиться <picture> з <source>.
Приклад конфігурації компонента
$APPLICATION->IncludeComponent( "local:banner.slider", "", array( "IBLOCK_ID" => 25, "SECTION_CODE" => "hero", "SLIDER_ENGINE" => "splide", "AUTOPLAY" => "Y", "AUTOPLAY_SPEED" => 5000, "LAZY_LOAD" => "Y", "CACHE_TIME" => 36000000, "CACHE_TYPE" => "A", "USE_WEBP" => "Y", ) ); Кастомний слайдер на інфоблоках працює в 1.5–2 рази швидше за рахунок тегованого кешування та оптимізації зображень. Як сказано в офіційній документації: «Теговане кешування дозволяє скидати кеш тільки тих компонентів, дані яких змінилися». Детальніше про кешування читайте в документації 1С-Бітрікс.
Вибір бібліотеки для слайдера
Swiper — де-факто стандарт, 140 КБ, підтримка touch, lazy loading, паралакс. Splide — легковаговикова альтернатива (30 КБ), без залежностей. Нативний CSS — scroll-snap-type, нуль JS для базової прокрутки. Рекомендуємо Splide для типових проєктів, Swiper для складних, нативний для мінімалістичних.
Як оптимізувати завантаження слайдера?
Слайдер на головній — перший елемент, що впливає на LCP. Основні правила:
- Перший слайд без lazy load:
loading="eager",fetchpriority="high". - Preload першого зображення в
<head>черезaddString(). - WebP-версії: десктоп 1920x600 в WebP важить 80–150 КБ проти 200–400 КБ JPEG.
- Відеофон: H.264, 1280x720, 1–2 Мбіт/с, тривалість до 10 с. На мобільних замінюється статикою.
Ці заходи скорочують обсяг завантажуваних даних до 30%, що позитивно впливає на LCP і загальний бюджет завантаження.
Управління для маркетолога
Менеджер працює в інтерфейсі інфоблока: створює елемент, завантажує зображення, заповнює тексти, ставить дати. Попередній перегляд — через кастомний шаблон. Сортування — drag-and-drop або поле SORT. Жодного HTML.
Що входить в розробку
- Проєктування структури інфоблока під завдання
- Розробка компонента з підтримкою обраної бібліотеки
- Адаптивна верстка (десктоп, планшет, мобільний)
- Генерація WebP/AVIF, preload, lazy loading
- Інтеграція відеофону
- Налаштування кешування
- Документація для маркетолога
Процес роботи
- Аналіз — вивчаємо вимоги, макети, прототипи.
- Проєктування — визначаємо структуру інфоблока, параметри компонента.
- Розробка — пишемо компонент, верстку, інтеграцію.
- Тестування — перевіряємо на всіх пристроях, у різних браузерах.
- Деплой і передача — встановлюємо на бойовий сервер, навчаємо менеджера.
Терміни (орієнтовно)
| Варіант | Склад | Термін |
|---|---|---|
| Один слайдер | Інфоблок, компонент, Splide, адаптив, WebP | 3–5 днів |
| Банерна система | Кілька зон, відеофони, preload, аналітика | 8–12 днів |
Вартість визначається після аналізу вимог. Замовте консультацію — ми оцінимо ваш проєкт.
Наш досвід і гарантії
Ми розробляємо на 1С-Бітрікс більше 4 років, реалізували понад 50 проєктів з кастомними слайдерами. Даємо гарантію на код і оперативну підтримку. Використовуємо тільки перевірені бібліотеки та підходи.
Зв'яжіться з нами, щоб замовити розробку слайдерів і банерів під ключ.