
Готовый адаптивный слайдер с прогресс-баром и текстом для 1С-Битрикс. Более 1000 установок. Улучшите визуал сайта — выберите шаблон прямо сейчас!
Онлайн-демонстрация
Хотите увидеть продукт в действии? Запросите демонстрацию — мы покажем всё вживую и ответим на вопросы.
Адаптивный слайдер с прогресс-баром и текстом представляет собой готовый компонент для CMS 1С-Битрикс, предназначенный для создания динамических каруселей изображений на сайте. Основная задача решения — визуальное выделение ключевых акций, новостей или товаров с автоматической сменой слайдов и индикацией времени до переключения. В отличие от статичных баннеров, этот слайдер автоматически генерирует контент на основе данных из инфоблоков, что делает его удобным инструментом для регулярного обновления промо-материалов без ручного редактирования кода.
Решение работает на платформе 1С-Битрикс и совместимо со всеми основными редакциями: от «Первого сайта» до «Бизнеса». Продукт полностью адаптивен и поддерживает технологию Композит, что обеспечивает высокую скорость загрузки на мобильных устройствах. Ключевая особенность — встроенный time-bar (линия загрузки), который визуально отображает оставшееся время до перехода к следующему слайду. В качестве источников данных используются элементы инфоблока: изображение берется из картинки анонса, текст — из описания для анонса, а ссылка формируется на основе символьного кода элемента. Пользователь может настраивать внешний вид линии загрузки и тип переключателей слайдов, адаптируя интерфейс под дизайн сайта.
После установки и настройки компонента на сайт добавляется функциональный блок, который автоматически выводит слайды на основе выбранного инфоблока. В комплект входит:
Все данные для вывода берутся из уже существующих или созданных инфоблоков, что исключает необходимость дублирования контента.
Слайдер оптимален для интернет-магазинов, корпоративных сайтов и лендингов, где требуется автоматическая демонстрация акций, новостей или портфолио. Благодаря гибкости настройки, он подходит для тематик с частым обновлением контента: e-commerce, услуги, медиа, строительство и производство. Продукт будет полезен владельцам сайтов, которые хотят сэкономить время на верстке баннеров и получить готовый инструмент с возможностью управления через административную панель. Наличие настраиваемого прогресс-бара делает слайдер более информативным для пользователя, сигнализируя о времени смены кадров, что повышает вовлеченность посетителей.
Установка модуля из Маркетплейса
Перейдите в административную панель сайта, выберите «Маркетплейс» → «Каталог решений». Найдите модуль «Адаптивный слайдер с индикатором прогресса и текстовым блоком» и нажмите «Установить». После завершения установки перейдите в «Маркетплейс» → «Установленные решения» и проверьте, что модуль отображается в списке.
Создание инфоблока для слайдера
Перейдите в «Контент» → «Инфоблоки» и создайте новый инфоблок (например, «Слайды»). В настройках укажите тип инфоблока «Контент» и включите поддержку картинок для анонса. Добавьте несколько тестовых элементов с изображениями и текстом в описании для анонса — они будут использоваться как слайды.
Настройка компонента на странице
Откройте страницу, где будет размещён слайдер (например, главную), и перейдите в режим редактирования. Добавьте компонент «Адаптивный слайдер» из списка компонентов модуля. В настройках компонента укажите созданный инфоблок в поле «Источник данных» и выберите режим отображения прогресс-бара.
Настройка параметров отображения
В параметрах компонента задайте высоту и ширину слайдера, скорость автоматического переключения слайдов (в секундах) и выберите, показывать ли текстовый блок. Убедитесь, что включена опция «Адаптивность» и поддержка Композитного режима для ускорения загрузки.
Проверка работы слайдера на сайте
Сохраните изменения на странице и откройте её в публичной части сайта. Убедитесь, что слайдер отображается корректно: изображения переключаются автоматически, прогресс-бар показывает оставшееся время, а текст из описания анонса отображается на каждом слайде. Проверьте отображение на мобильном устройстве, изменив ширину окна браузера.
Настройка дополнительных параметров
При необходимости вернитесь в настройки компонента и настройте внешний вид: измените цвета прогресс-бара, шрифт текста или добавьте ссылки на слайды (ссылка формируется из символьного кода элемента инфоблока). Если требуется обновить контент, просто добавьте или отредактируйте элементы в инфоблоке — изменения отобразятся автоматически.
Нужна помощь с установкой?
Напишите нам — поможем установить и настроить модуль на вашем сайте.
По этой теме
Соберём интернет-магазин на 1С-Битрикс под ключ, с нужными модулями