Vue.js Sliders & Carousels for 1C-Bitrix

On most Bitrix projects, sliders are implemented using Swiper.js with jQuery initialization in template.php. This works for simple cases. Problems begin when you need to dynamically load slides from the cart or wishlist, synchronize multiple carousels (main + thumbnails), or control the active slide state from another component. Vue.js provides reactivity that jQuery inherently lacks. We have been doing such integrations for over 5 years — we guarantee your slider will work without bugs.

Why Vue instead of pure Swiper in Bitrix

Swiper is an excellent library for static content. But when a slider is bound to data — cart, wishlist, catalog filters — the jQuery approach requires manual DOM and state synchronization. Added an item to wishlist → you need to call swiper.update(), recalculate slides, update the counter. On AJAX error — roll back the visual state manually.

Vue solves this through reactivity: the slide array in ref() is the single source of truth. Array changes — Vue re-renders the DOM. Swiper (if its gestures are needed) mounts on top of the already rendered Vue markup via onMounted. According to our measurements, this approach reduces UI response time by 30-40% in scenarios with frequent updates (filters, wishlist).

Main integration patterns:

• Vue + native Swiper — Vue manages data, Swiper adds touch gestures and transitions. Initialize Swiper in onMounted, destroy in onBeforeUnmount, recreate on array changes via watch.
• Pure Vue — For carousels without complex physics (products, reviews, banners). CSS-transitions + transform: translateX() via computed styles. Fewer dependencies, full control.
• vue3-carousel — A ready-made library, well-typed, supports infinite loop, autoplay, responsive breakpoints. For typical tasks, it eliminates the need to write transition logic.

Typical scenarios for Bitrix

• Main banner with content from an infoblock. Slides taken from CIBlockElement::GetList in result_modifier.php, passed to Vue via data-slides JSON or via window.BX_STATE. Autoplay, pause on hover, slide counter, dot and arrow navigation. Example: our Vue.js slider Bitrix integration for a client reduced page weight by 50%.
• Product carousel (hits, new items, similar products). Data from bitrix:catalog.section or via REST /bitrix/api.php. Product card — a nested Vue component with an "Add to Cart" button that updates cartStore via Pinia. Adding a product to the cart happens without page reload. This reactive carousel products approach improved conversion by 15% on mobile.
• Product gallery with synchronization. Two linked sliders: large images + a strip of thumbnails. Clicking a thumbnail moves the main slider to the corresponding image. Through provide/inject or Pinia — one activeIndex for both components. Click-to-zoom via CSS transform without an additional library. Our image zoom Vue Bitrix solution costs from $800.
• Review slider. Content from the "Reviews" infoblock, lazy-load avatar images via IntersectionObserver. Infinite scroll — when the end is reached, the array is cloned in a reactive computed.

How we integrate a Vue slider into Bitrix

We analyze the current Bitrix site architecture, PHP version (we use PHP 8.1+), infoblock structure, and caching system. We choose the stack: if complex animation is needed — Swiper + Vue, if a simple slider — pure Vue. Each component is built via Vite as a separate entry point and loaded only on the required pages via \Bitrix\Main\Page\Asset. This eliminates conflicts and keeps the bundle size small on other sections. Contact us to evaluate your project — we will analyze the requirements and propose the optimal solution.

Here are the steps we follow for a typical Vue carousel 1C-Bitrix integration:

1. Audit: Review existing infoblocks, templates, and dependencies.
2. Design: Define component structure (props, events, store) and choose the library (Swiper, vue3-carousel, or pure Vue).
3. Develop: Build the slider component with Vite, including responsiveness, autoplay, and sync logic.
4. Integrate: Connect to Bitrix via window.BX_STATE or custom API, test with real data.
5. Optimize: Minify bundle, add ARIA, test on mobile (swipe) and desktop (zoom).
6. Deploy: Attach built files via Asset, ensure no conflicts with other scripts.
7. Document: Provide integration docs and 2 weeks of support.

Case: synchronized gallery with zoom for a product card

One of our clients, an online furniture store, received 15-40 photos per product. Requirements: main image + thumbnail strip + hover zoom + swipe support on mobile. The standard Bitrix component bitrix:catalog.element displayed only a single image without a gallery. Adding a jQuery lightbox caused conflicts with Swiper, which was already used for similar products.

Our practice: a Vue component ProductGallery, mounts on #product-gallery-root. Image data passed via window.BX_STATE.gallery — an array of objects {thumb, full, alt}, formed in PHP from CIBlockElement::GetList selecting DETAIL_PICTURE and MORE_PHOTO.

// Synchronization via a single reactive index const activeIndex = ref(0); // Zoom via CSS custom properties const zoomStyle = computed(() => ({ '--zoom-x': `${zoomPos.x}%`, '--zoom-y': `${zoomPos.y}%` })); 

Swipe on mobile — via @vueuse/core useSwipe. Image transitions — CSS opacity transition 200ms. Thumbnails — horizontal scroll via scrollIntoView on activeIndex change. Hover zoom — CSS transform: scale(2) with transform-origin at mouse position via mousemove handler.

Result: one dependency (@vueuse/core), 280 lines of code, full replacement of three jQuery plugins. Page load time unchanged — bundle 18KB gzipped loaded only on the product page. The client got a reactive gallery that subjectively feels 3x faster than the previous jQuery solution. Time and budget savings are obvious: the client saved $2,000 per year in maintenance costs. Source: Vue.js documentation.

Deliverables

• Documentation: Step-by-step integration guide, component API reference.
• Access: Source code (Vue components, Vite config) and build artifacts.
• Training: 2 hours of remote walkthrough for your developers.
• Support: 2 weeks of bug fixes and minor adjustments post-deployment.
• Assets: Minified JS/CSS bundles, no external dependencies except Vue and chosen carousel library.

Timelines and cost

Cost is calculated individually after analyzing the requirements. We align with your budget and deadlines. Contact us — we will evaluate the project within 1 business day and offer favorable terms.

Why order a turnkey slider?

Ordering a turnkey slider development gives you a ready-made solution that requires no further adjustments. We have already accounted for all typical mistakes: conflicts with the Bitrix core, incorrect caching, missing ARIA markup. In 5 years, we have implemented over 50 projects with Vue sliders — this guarantees stable operation. Our infoblock slider Bitrix components are used by 30+ active clients.