PHPackages hryvinskyi/magento2-banner-slider-frontend-ui - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. hryvinskyi/magento2-banner-slider-frontend-ui ActiveMagento2-module[Utility & Helpers](/categories/utility) hryvinskyi/magento2-banner-slider-frontend-ui ============================================= Banner Slider Frontend UI module - frontend display components 1.0.7(4mo ago)091↓69.2%1MITPHPPHP ^8.1 Since Jan 31Pushed 4mo agoCompare [ Source](https://github.com/hryvinskyi/magento2-banner-slider-frontend-ui)[ Packagist](https://packagist.org/packages/hryvinskyi/magento2-banner-slider-frontend-ui)[ RSS](/packages/hryvinskyi-magento2-banner-slider-frontend-ui/feed)WikiDiscussions main Synced 3w ago READMEChangelogDependencies (8)Versions (9)Used By (1) Magento 2 & Adobe Commerce Banner Slider Frontend UI ======================================================== [](#magento-2--adobe-commerce-banner-slider-frontend-ui) Frontend display module for Banner Sliders. > **Part of [hryvinskyi/magento2-banner-slider-pack](https://github.com/hryvinskyi/magento2-banner-slider-pack)** - Complete Banner Slider solution for Magento 2 Description ----------- [](#description) This module provides the frontend display functionality for banner sliders. It includes a widget for placing sliders on CMS pages, categories, or any widget-enabled area, with full support for responsive images, video embeds, and custom HTML content. Features -------- [](#features) - Widget-based slider placement - Splide.js carousel integration - Responsive image rendering with `` elements - AVIF and WebP format support with automatic fallbacks - Video rendering (YouTube, Vimeo, local files) - LCP optimization with preload links - Full Page Cache compatible with proper cache tags Widget Usage ------------ [](#widget-usage) ### CMS Page/Block [](#cms-pageblock) ``` {{widget type="Hryvinskyi\BannerSliderFrontendUi\Block\Widget\Slider" slider_id="1" template="Hryvinskyi_BannerSliderFrontendUi::slider.phtml"}} ``` ### Layout XML [](#layout-xml) ``` 1 ``` Widget Parameters ----------------- [](#widget-parameters) ParameterTypeDescription`slider_id`SelectThe slider to display (required)`template`SelectTemplate file for rendering (required)Components ---------- [](#components) ### Block/Widget/Slider [](#blockwidgetslider) Main widget block that: - Loads slider and associated banners - Filters by active status, date range, and position - Generates Splide.js configuration as JSON - Preloads responsive crops to prevent N+1 queries - Provides cache tags for FPC invalidation ### ViewModel/BannerRenderer [](#viewmodelbannerrenderer) Banner rendering logic that handles: - Banner type detection (image, video, custom) - Image URL generation - Responsive image HTML with `` element - Video provider detection and embed HTML - Preload link generation for LCP optimization - Image dimension caching Responsive Images ----------------- [](#responsive-images) The module generates `` elements with multiple sources for optimal loading: ``` ``` Video Support ------------- [](#video-support) ### YouTube/Vimeo [](#youtubevimeo) - Iframe embeds with responsive sizing - Background mode (no controls, autoplay, muted, loop) - Custom aspect ratio support ### Local Videos [](#local-videos) - Native `` element - MP4 and WebM format support - Autoplay, muted, and loop options Splide.js Integration --------------------- [](#splidejs-integration) The carousel uses Splide.js with the following configurable options: OptionDescription`type`Carousel type (loop, slide, fade)`perPage`Slides visible at once`perMove`Slides to move per action`autoplay`Enable auto-advance`interval`Time between slides (ms)`arrows`Show navigation arrows`pagination`Show dot pagination`lazyLoad`Enable lazy loading`autoWidth`Automatic slide width`autoHeight`Automatic slide height`speed`Animation speed (ms)`rewind`Rewind instead of infinite loop`breakpoints`Responsive configurationPerformance Optimization ------------------------ [](#performance-optimization) - **Preload Links**: Generates `` for above-the-fold images - **Lazy Loading**: Uses native `loading="lazy"` for below-fold images - **Format Selection**: Serves AVIF/WebP to supporting browsers - **N+1 Prevention**: Preloads all responsive crops in a single query - **Cache Tags**: Proper FPC invalidation on content changes Dependencies ------------ [](#dependencies) - PHP 8.1+ - magento/framework - magento/module-widget - hryvinskyi/magento2-base ^2.1.5 - hryvinskyi/magento2-banner-slider-api - hryvinskyi/magento2-banner-slider - hryvinskyi/magento2-splide-js - hryvinskyi/magento2-head-tag-manager Installation ------------ [](#installation) This module is typically installed as part of the `hryvinskyi/magento2-banner-slider-pack` metapackage: ``` composer require hryvinskyi/magento2-banner-slider-pack php bin/magento module:enable Hryvinskyi_BannerSliderFrontendUi php bin/magento setup:upgrade php bin/magento cache:flush ``` Author ------ [](#author) **Volodymyr Hryvinskyi** - Email: License ------- [](#license) MIT ### Health Score 38 — LowBetter than 83% of packages Maintenance74 Regular maintenance activity Popularity12 Limited adoption so far Community8 Small or concentrated contributor base Maturity49 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 8 Last Release 144d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/9294098?v=4)[Volodymyr Hryvinskyi](/maintainers/hryvinskyi)[@hryvinskyi](https://github.com/hryvinskyi) --- Top Contributors [![hryvinskyi](https://avatars.githubusercontent.com/u/9294098?v=4)](https://github.com/hryvinskyi "hryvinskyi (8 commits)") ### Embed Badge ![Health badge](/badges/hryvinskyi-magento2-banner-slider-frontend-ui/health.svg) ``` [![Health](https://phpackages.com/badges/hryvinskyi-magento2-banner-slider-frontend-ui/health.svg)](https://phpackages.com/packages/hryvinskyi-magento2-banner-slider-frontend-ui) ``` ### Alternatives [elgentos/regenerate-catalog-urls Regenerate Catalog URL Rewrites (products, categories, cms pages) 2842.6M](/packages/elgentos-regenerate-catalog-urls)[myparcelnl/magento A Magento 2 module that creates MyParcel labels 1859.0k](/packages/myparcelnl-magento)[loki/magento2-components Core module for defining Alpine.js components with advanced AJAX features 1010.0k22](/packages/loki-magento2-components) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)