Разработка слайдеров и каруселей на Vue.js для 1С-Битрикс

Разработка слайдеров и каруселей на Vue.js для 1С-Битрикс

На большинстве битриксовых проектов слайдеры реализованы через Swiper.js с jQuery-инициализацией в template.php. Это работает для простых случаев. Проблемы начинаются, когда нужно: динамически подгружать слайды из корзины или избранного, синхронизировать несколько каруселей (главная + миниатюры), управлять состоянием активного слайда из другого компонента. Vue.js даёт реактивность, которой в jQuery нет по определению.

Почему Vue, а не чистый Swiper в Битрикс

Swiper.js — отличная библиотека для статичного контента. Но когда слайдер связан с данными — корзина, wishlist, фильтры каталога — jQuery-подход требует ручной синхронизации DOM и состояния. Добавил товар в избранное → нужно вызвать swiper.update(), пересчитать слайды, обновить счётчик. При ошибке AJAX — откатить визуальное состояние вручную.

Vue решает это через реактивность: массив слайдов в ref() — источник правды. Изменился массив — Vue перерисовал DOM. Swiper (если нужны его жесты) монтируется поверх уже готового Vue-рендера через onMounted.

Основные паттерны интеграции:

• Vue + нативный Swiper — Vue управляет данными, Swiper добавляет тач-жесты и переходы. Инициализация Swiper в onMounted, уничтожение в onBeforeUnmount, пересоздание при изменении массива через watch
• Полностью на Vue — для каруселей без сложной физики (товары, отзывы, баннеры). CSS-transitions + transform: translateX() через вычисляемые стили. Меньше зависимостей, полный контроль
• vue3-carousel — готовая библиотека, хорошо типизирована, поддерживает infinite loop, autoplay, responsive breakpoints. Для типовых задач избавляет от написания логики переходов

Типичные сценарии для Битрикс

Главный баннер с контентом из инфоблока. Слайды берутся из CIBlockElement::GetList в result_modifier.php, передаются в Vue через data-slides JSON или через window.BX_STATE. Автоплей, пауза при hover, счётчик слайдов, навигация точками и стрелками.

Карусель товаров (хиты, новинки, похожие товары). Данные из bitrix:catalog.section или через REST /bitrix/api.php. Карточка товара — вложенный Vue-компонент с кнопкой «В корзину», которая обновляет cartStore через Pinia. Изменение состояния кнопки (добавляется → добавлен) без перезагрузки страницы.

Галерея товара с синхронизацией. Два связанных слайдера: большие изображения + полоса миниатюр. При клике на миниатюру — основной слайдер переходит к нужному изображению. Через provide/inject или через Pinia — один activeIndex на оба компонента. Масштабирование по клику (zoom) через CSS transform без отдельной библиотеки.

Слайдер отзывов. Контент из инфоблока «Отзывы», lazy-load изображений аватаров через IntersectionObserver. Бесконечная прокрутка — при достижении конца массив клонируется в реактивном computed.

Кейс: синхронизированная галерея с зумом для карточки товара

Интернет-магазин мебели, 15-40 фотографий на товар, требование: основное изображение + полоса миниатюр + зум при наведении + поддержка свайпа на мобильных.

Стандартный битриксовый компонент bitrix:catalog.element выводил единственное изображение без галереи. Добавление jQuery-lightbox создавало конфликты со Swiper, который уже использовался для похожих товаров.

Решение: Vue-компонент ProductGallery, монтируется на #product-gallery-root. Данные изображений передаются через window.BX_STATE.gallery — массив объектов {thumb, full, alt}, сформированных в PHP из CIBlockElement::GetList с выборкой DETAIL_PICTURE и MORE_PHOTO.

// Синхронизация через один реактивный индекс
const activeIndex = ref(0);

// Зум через CSS custom properties
const zoomStyle = computed(() => ({
    '--zoom-x': `${zoomPos.x}%`,
    '--zoom-y': `${zoomPos.y}%`
}));

Свайп на мобильных — через @vueuse/core useSwipe. Переход между изображениями — CSS opacity transition 200ms. Миниатюры — горизонтальный скролл через scrollIntoView при смене activeIndex. Зум при hover — CSS transform: scale(2) с transform-origin по позиции мыши через mousemove-обработчик.

Итог: одна зависимость (@vueuse/core), 280 строк кода, полная замена трёх jQuery-плагинов. Время загрузки страницы не изменилось — бандл 18KB gzipped подключается только на странице товара.

Сборка и подключение в Битрикс

Слайдеры — изолированные Vue-приложения, каждое монтируется на свой корневой элемент. Vite собирает отдельные точки входа для каждого компонента:

// vite.config.js
export default {
    build: {
        rollupOptions: {
            input: {
                productGallery: 'src/product-gallery/main.js',
                homeBanner: 'src/home-banner/main.js',
                reviewsSlider: 'src/reviews-slider/main.js',
            }
        }
    }
}

Подключение через \Bitrix\Main\Page\Asset только на нужных страницах. Компоненты не знают друг о друге, конфликты исключены. Если Pinia нужна в нескольких компонентах на одной странице — создаётся один глобальный store, подключается как singleton через window.__pinia.

Этапы и сроки

Сроки увеличиваются при нестандартных анимациях, сложных breakpoints и требованиях к accessibility (ARIA live regions для screen readers).