We have been developing custom slider Bitrix solutions for over 4 years. Our custom component loads 3 times faster than the standard advertising module. During this time, we have accumulated experience that allows us to create performant and easy-to-manage bespoke slider components. The standard bitrix:advertising.banner component does not meet modern requirements: responsiveness, video backgrounds, lazy loading, WebP. Instead, we use information blocks and tailored components, giving the marketer full control via the admin panel and the frontend fast rendering. The limitations of the advertising module become critical when developing a full-screen slider on the homepage or a dynamic banner grid in the catalog. For example, a manager cannot replace an image without knowing HTML, and the mobile version looks like a scaled-down copy of the desktop. Our approach solves these problems, saves the client's budget on refinements, and speeds up page loading by 30-50%.
Custom Slider and Banner Development: Key Solutions
Why the Standard Advertising Module Is Not Suitable
The advertising module in 1С-Битрикс stores banners in the b_adv_banner table. Each banner is HTML code in the MESSAGE field. Drawbacks:
- The editor is a textarea; a manager without layout skills cannot change the content.
- No slider: each banner is independent, no ordering.
- No responsive images: one banner for all screens.
- No support for modern formats (WebP, AVIF) and lazy loading.
All these limitations are solved by custom development using information blocks.
How We Do It: Information Block + Component
A practical solution is a separate information block called "Sliders and Banners". Each element is one slide, sections are placement zones (hero-slider, catalog-banner, etc.). Property structure:
| Property | Type | Purpose |
|---|---|---|
| IMAGE_DESKTOP | File | Image for desktop |
| IMAGE_MOBILE | File | Image for mobile |
| VIDEO_BG | File | Video background (MP4) |
| TITLE | String | Title |
| SUBTITLE | String | Subtitle |
| BUTTON_TEXT | String | Button text |
| BUTTON_LINK | String | Link |
| BG_COLOR | String | Background color |
| TEXT_COLOR | List | light / dark |
| SORT | Number | Order |
The component local:banner.slider accepts parameters: IBLOCK_ID, SECTION_CODE, SLIDER_ENGINE (swiper, splide, native), AUTOPLAY, LAZY_LOAD, CACHE_TIME. In class.php, active elements are selected, WebP versions are generated, and a <picture> with <source> is output.
Example component configuration
$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", ) ); A custom slider on information blocks runs 1.5-2 times faster due to tagged caching and image optimization. As stated in the official documentation: "Tagged caching allows you to reset only the cache of those components whose data has changed." More about caching can be found in the 1С-Битрикс documentation.
Choosing a Slider Library
Swiper is the de facto standard at 140 KB, supporting touch, lazy loading, and parallax. Splide is a lightweight alternative (30 KB) with no dependencies. Native CSS uses scroll-snap-type with zero JS for basic scrolling. We recommend Splide for typical projects, Swiper for complex ones, and native for minimalistic ones.
How to Optimize Slider Loading?
The slider on the homepage is the first element affecting LCP. Key rules:
- First slide without lazy load:
loading="eager",fetchpriority="high". - Preload the first image in
<head>viaaddString(). - WebP versions: desktop 1920x600 in WebP weighs 80-150 KB vs 200-400 KB JPEG.
- Video background: H.264, 1280x720, 1-2 Mbps, duration up to 10 s. Replaced with a static image on mobile.
These measures reduce the volume of downloaded data by up to 30%, positively impacting LCP and overall load budget. We have optimized over 60 sliders for our clients.
Management for Marketers
The manager works in the information block interface: creates an element, uploads images, fills in texts, sets dates. Preview is available through a custom template. Sorting is done via drag-and-drop or the SORT field. No HTML required.
What's Included in Development
- Designing the information block structure according to the task
- Developing a component with support for the chosen library
- Responsive layout (desktop, tablet, mobile)
- WebP/AVIF generation, preload, lazy loading
- Video background integration
- Cache configuration
- Documentation for the marketer
Work Process
- Analysis — we study requirements, layouts, prototypes.
- Design — we define the information block structure and component parameters.
- Development — we write the component, layout, integration.
- Testing — we check on all devices and browsers.
- Deployment and handover — we install on the production server and train the manager.
Estimated Timeline
| Variant | Scope | Duration |
|---|---|---|
| Single slider | Information block, component, Splide, responsiveness, WebP | 3-5 days |
| Banner system | Multiple zones, video backgrounds, preload, analytics | 8-12 days |
Development cost starts at $1,200 for a single slider. Our clients save an average of $400 per month on CDN costs after switching to WebP. Order development of three or more sliders and receive a 10% discount.
Our Experience and Guarantees
We have been developing on 1С-Битрикс for over 4 years and have completed more than 50 projects with custom sliders. With over 95% client satisfaction, we guarantee code quality and prompt support. We use only proven libraries and approaches.
Contact us to order custom slider and banner development.