Мы занимаемся кастомной разработкой слайдеров и баннеров на 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 дней |
Средняя стоимость одного слайдера составляет $150–300 в зависимости от сложности. Закажите консультацию — мы оценим ваш проект. Закажите разработку от трёх слайдеров и получите скидку 10%.
Наш опыт и гарантии
Мы разрабатываем на 1С-Битрикс более 4 лет, реализовали свыше 50 проектов с кастомными слайдерами. Даём гарантию на код и оперативную поддержку. Используем только проверенные библиотеки и подходы.
Свяжитесь с нами, чтобы заказать разработку слайдеров и баннеров под ключ.