Development of sliders and banners on 1C-Bitrix

Our company is engaged in the development, support and maintenance of Bitrix and Bitrix24 solutions of any complexity. From simple one-page sites to complex online stores, CRM systems with 1C and telephony integration. The experience of developers is confirmed by certificates from the vendor.
8+Years of work900+Completed projects100+In house employees19+Partners
Offered services
Showing 1 of 1 servicesAll 1626 services
Development of sliders and banners on 1C-Bitrix
Medium
~1-2 weeks
FAQ
Our competencies:
Development stages
Latest works
  • image_website-b2b-advance_0.png
    B2B ADVANCE company website development
    1175
  • image_bitrix-bitrix-24-1c_fixper_448_0.png
    Website development for FIXPER company
    811
  • image_bitrix-bitrix-24-1c_development_of_an_online_appointment_booking_widget_for_a_medical_center_594_0.webp
    Development based on Bitrix, Bitrix24, 1C for the company Development of an Online Appointment Booking Widget for a Medical Center
    564
  • image_bitrix-bitrix-24-1c_mirsanbel_458_0.webp
    Development based on 1C Enterprise for MIRSANBEL
    747
  • image_crm_dolbimby_434_0.webp
    Website development on CRM Bitrix24 for DOLBIMBY
    655
  • image_crm_technotorgcomplex_453_0.webp
    Development based on Bitrix24 for the company TECHNOTORGKOMPLEKS
    976
Show more works

Development of Sliders and Banners for 1C-Bitrix

Standard Bitrix banner — bitrix:advertising.banner component, tied to advertising module (advertising). Created in era of GIF-banners and impression/click counting. For modern tasks — full-screen sliders with animation, adaptive banner grids, video backgrounds — not suitable. Need custom development giving marketer convenient admin management and frontend productive, flexible rendering.

Why Not Standard Advertising Module

Module advertising stores banners in b_adv_banner table. Each banner — HTML code, contract type (impressions/clicks), period, section binding. Module counts stats and manages rotation.

Problems:

  • Banner Editor — textarea with HTML code. Manager without markup knowledge won't change content.
  • No slider concept — module operates separate banners, not ordered slide sets.
  • No responsive images — one banner for all screens. On mobile, horizontal 1920x600 image unreadable.
  • No lazy load, WebP, video backgrounds — all must be added.

iblock as Storage

Practical solution — separate iblock "Sliders and Banners". Each element — one slide or banner. iblock sections — named placement zones (hero-slider, catalog-banner, sidebar-promo).

Element property structure:

Property Type Purpose
IMAGE_DESKTOP File Desktop image (1920x600)
IMAGE_MOBILE File Mobile image (768x900)
VIDEO_BG File Video background (MP4, up to 5 MB)
TITLE String Slide title
SUBTITLE String Subtitle
BUTTON_TEXT String Button text
BUTTON_LINK String Button link
BUTTON_TARGET List _self / _blank
BG_COLOR String Background color (fallback on load)
TEXT_COLOR List light / dark (for contrast)
SORT Number Order in slider

For responsive images, separate properties, not one with resize. Reason: on mobile need different composition — vertical, large text, different cropping.

Output Component

Component local:banner.slider takes parameters:

  • IBLOCK_ID — banner iblock.
  • SECTION_CODE — section code (placement zone).
  • SLIDER_ENGINE — library: swiper, splide, native.
  • AUTOPLAY — autoplay (true/false).
  • AUTOPLAY_DELAY — interval milliseconds.
  • LAZY_LOAD — lazy load images.
  • CACHE_TIME — cache time.

In class.php component selects active elements from needed section, sorts by SORT, for each image generates WebP version via \Bitrix\Main\File\Image\Imagick (or GD) and forms <picture> with <source>.

Slider Library Choice

Swiper — de-facto standard. 140 KB (minified), touch support, lazy loading, virtual slides, parallax effects. Via npm or CDN.

Splide — lightweight alternative, 30 KB. Fewer features, sufficient for most tasks. No dependencies.

Native CSS slider — scroll-snap-type + scroll-behavior: smooth. Zero JavaScript for basic scroll. Autoplay and indicators need minimal JS. Maximum performance but limited animation.

Recommendation: Splide for typical projects, Swiper for complex scenarios (parallax, vertical sliders, nested), native CSS for minimalist projects emphasizing speed.

Load Optimization

Slider on homepage — first visual element. Its load speed directly affects Core Web Vitals (LCP).

First slide — no lazy load. loading="eager" and fetchpriority="high" attributes for first image. Rest slides — loading="lazy".

Preload first image in <head>:

<link rel="preload" as="image" href="/upload/slider/hero-1.webp"
      media="(min-width: 768px)" type="image/webp">
<link rel="preload" as="image" href="/upload/slider/hero-1-mob.webp"
      media="(max-width: 767px)" type="image/webp">

Added via \Bitrix\Main\Page\Asset::getInstance()->addString() in component.

Image sizes. Desktop 1920x600 JPEG weighs 200-400 KB. In WebP — 80-150 KB. AVIF — smaller but incomplete browser support. Component generates both versions and outputs <picture> with fallback.

Video background. MP4, H.264 codec, 1280x720 resolution, 1-2 Mbps bitrate, 5-10 seconds duration. <video> attributes: autoplay muted loop playsinline. On mobile, video replaced with static image — saves traffic and battery. Determined via matchMedia('(max-width: 768px)').

Management for Marketer

Manager works in familiar iblock interface: creates element, uploads images, fills text fields, sets activity dates. Preview — via "View" element button with custom template.

Slide sorting — drag-and-drop in element list (if visual sort enabled in iblock settings) or via SORT field.

Timelines

Variant Contents Timeline
One slider iblock, component, Splide, responsive, WebP 3-5 days
Banner system Multiple zones, video backgrounds, preload, click analytics, A/B testing 8-12 days
1C Bitrix presentation1C Bitrix24 presentation1C Enterprise presentation