PHPackages                             hryvinskyi/magento2-banner-slider-pack - 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-pack

ActiveMetapackage[Utility & Helpers](/categories/utility)

hryvinskyi/magento2-banner-slider-pack
======================================

Complete Banner Slider solution for Magento 2 with responsive images, video support, and advanced cropping tools

1.0.1(4mo ago)084↓69.2%MIT

Since Jan 31Pushed 4mo agoCompare

[ Source](https://github.com/hryvinskyi/magento2-banner-slider-pack)[ Packagist](https://packagist.org/packages/hryvinskyi/magento2-banner-slider-pack)[ RSS](/packages/hryvinskyi-magento2-banner-slider-pack/feed)WikiDiscussions main Synced 3w ago

READMEChangelogDependencies (6)Versions (3)Used By (0)

Magento 2 & Adobe Commerce Banner Slider
============================================

[](#magento-2--adobe-commerce-banner-slider)

Complete banner slider solution with responsive images, video support, WebP/AVIF optimization, and advanced cropping tools.

Overview
--------

[](#overview)

This metapackage provides a complete solution for managing banner sliders in Magento 2. It includes powerful features for creating responsive image banners, video banners (YouTube, Vimeo, local), and custom HTML content with a modern Splide.js carousel.

Included Packages
-----------------

[](#included-packages)

### Core Modules

[](#core-modules)

- **hryvinskyi/magento2-banner-slider-api** (v1.0.0) - API interfaces and contracts
- **hryvinskyi/magento2-banner-slider** (v1.0.0) - Core business logic and data layer
- **hryvinskyi/magento2-banner-slider-admin-ui** (v1.0.0) - Admin panel interface with responsive cropper
- **hryvinskyi/magento2-banner-slider-frontend-ui** (v1.0.0) - Frontend display with Splide.js carousel
- **hryvinskyi/magento2-banner-slider-analytics** (v1.0.0) - Analytics and statistics tracking

Key Features
------------

[](#key-features)

### Banner Types

[](#banner-types)

- **Image Banners** - Static images with responsive variants for all breakpoints
- **Video Banners** - YouTube, Vimeo, or local video files (MP4, WebM)
- **Custom HTML** - Full HTML content support for maximum flexibility

### Responsive Images

[](#responsive-images)

- **Breakpoint-based cropping** - Different crops for desktop, tablet, and mobile
- **WebP generation** - Automatic WebP conversion for smaller file sizes
- **AVIF generation** - Next-gen format support for maximum compression
- **Picture element** - Proper `` with source sets and fallbacks

### Video Support

[](#video-support)

- **YouTube** - Embed YouTube videos with custom options
- **Vimeo** - Embed Vimeo videos with custom options
- **Local MP4/WebM** - Self-hosted video files with native `` element
- **Background mode** - Videos as backgrounds (autoplay, muted, loop, no controls)
- **Custom aspect ratios** - Configure video aspect ratios per banner

### Admin Features

[](#admin-features)

- **Visual cropper** - Interactive image cropping interface
- **Client-side compression** - WebP/AVIF compression in browser using jsquash
- **Before/after preview** - Compare original vs compressed images
- **Drag-and-drop uploads** - Easy image and video uploading
- **Multi-store support** - Target sliders to specific store views
- **Customer group targeting** - Show sliders to specific customer groups
- **Date scheduling** - Schedule slider visibility with from/to dates

### Carousel Features (Splide.js)

[](#carousel-features-splidejs)

- **Multiple slide types** - Loop, slide, fade effects
- **Autoplay** - Configurable auto-advance with customizable interval
- **Navigation** - Previous/next arrows with styling options
- **Pagination** - Dot indicators with styling options
- **Lazy loading** - Native lazy loading for better performance
- **Responsive breakpoints** - Different settings per viewport

### Performance

[](#performance)

- **Preload links** - Generate `` for LCP images
- **Lazy loading** - Native `loading="lazy"` for below-fold images
- **N+1 prevention** - Efficient queries with preloaded responsive crops
- **Full Page Cache** - Proper cache tags for FPC compatibility

### Analytics & Statistics

[](#analytics--statistics)

- **Impression tracking** - Count how many times banners are displayed
- **Click tracking** - Count how many times banners are clicked
- **CTR calculation** - Automatic click-through rate calculation
- **Daily aggregation** - Statistics aggregated by day for trend analysis
- **Per-slider reporting** - View aggregated stats for each slider
- **Per-banner reporting** - Drill down to individual banner performance
- **Store view filtering** - Filter statistics by store view
- **Visual dashboard** - Color-coded CTR indicators in admin grid

Installation
------------

[](#installation)

```
composer require hryvinskyi/magento2-banner-slider-pack
php bin/magento module:enable Hryvinskyi_BannerSliderApi Hryvinskyi_BannerSlider Hryvinskyi_BannerSliderAdminUi Hryvinskyi_BannerSliderFrontendUi Hryvinskyi_BannerSliderAnalytics
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush
```

Configuration
-------------

[](#configuration)

### Creating a Slider

[](#creating-a-slider)

1. Navigate to **Content > Banner Slider > Sliders**
2. Click **Add New Slider**
3. Configure slider settings:
    - **Name** - Identifier for the slider
    - **Status** - Enable/disable
    - **Store Views** - Target store views
    - **Customer Groups** - Target customer groups
    - **Animation** - Effect type, auto width/height, loop
    - **Autoplay** - Enable and set interval
    - **Navigation** - Arrows and pagination
    - **Responsive** - Items per breakpoint

### Adding Banners

[](#adding-banners)

1. Navigate to **Content > Banner Slider > Banners**
2. Click **Add New Banner**
3. Select parent slider
4. Choose banner type (Image, Video, or Custom HTML)
5. Configure content:
    - **Image** - Upload desktop image, configure responsive crops
    - **Video** - Enter URL or upload local file
    - **Custom HTML** - Enter HTML content
6. Set link URL and target
7. Configure position and date range

### Responsive Image Cropping

[](#responsive-image-cropping)

1. Edit a banner
2. In the Responsive Crops section, click on a breakpoint
3. Use the visual cropper to adjust the crop area
4. Enable WebP/AVIF generation and set quality
5. Save the banner

### Placing the Slider

[](#placing-the-slider)

#### Widget in CMS Page/Block

[](#widget-in-cms-pageblock)

```
{{widget type="Hryvinskyi\BannerSliderFrontendUi\Block\Widget\Slider" slider_id="1" template="Hryvinskyi_BannerSliderFrontendUi::slider.phtml"}}

```

#### Layout XML

[](#layout-xml)

```

            1

```

### Viewing Analytics

[](#viewing-analytics)

1. Navigate to **Content > Banner Slider > Analytics**
2. View slider statistics dashboard with impressions, clicks, and CTR
3. Click on a slider row to see per-banner performance details
4. Use store view filter to analyze specific store performance

Database Schema
---------------

[](#database-schema)

TableDescription`hryvinskyi_banner_slider`Slider configuration`hryvinskyi_banner_slider_banner`Banner content`hryvinskyi_banner_slider_image`Responsive image variants`hryvinskyi_banner_slider_breakpoint`Viewport breakpoints`hryvinskyi_banner_slider_responsive_crop`Crop configurations`hryvinskyi_banner_slider_statistics`Analytics data (impressions, clicks, CTR)Requirements
------------

[](#requirements)

- PHP 8.1, 8.2, or 8.3
- Magento 2.4.x
- Composer

Dependencies
------------

[](#dependencies)

The pack requires these additional packages (installed automatically):

- hryvinskyi/magento2-base
- hryvinskyi/magento2-splide-js
- hryvinskyi/magento2-head-tag-manager
- hryvinskyi/image-binaries
- symfony/process

Support
-------

[](#support)

- Report issues:
- Email:

Author
------

[](#author)

**Volodymyr Hryvinskyi**

- Email:
- Website:

License
-------

[](#license)

MIT License - see LICENSE file for details

Changelog
---------

[](#changelog)

See [CHANGELOG.md](CHANGELOG.md) for detailed version history.

###  Health Score

34

—

LowBetter than 75% of packages

Maintenance74

Regular maintenance activity

Popularity11

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity36

Early-stage or recently created project

 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 ~2 days

Total

2

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 (3 commits)")

### Embed Badge

![Health badge](/badges/hryvinskyi-magento2-banner-slider-pack/health.svg)

```
[![Health](https://phpackages.com/badges/hryvinskyi-magento2-banner-slider-pack/health.svg)](https://phpackages.com/packages/hryvinskyi-magento2-banner-slider-pack)
```

###  Alternatives

[elgentos/regenerate-catalog-urls

Regenerate Catalog URL Rewrites (products, categories, cms pages)

2842.6M](/packages/elgentos-regenerate-catalog-urls)[run-as-root/magento2-prometheus-exporter

Magento2 Prometheus Exporter

68353.9k](/packages/run-as-root-magento2-prometheus-exporter)[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)[magepal/magento2-form-field-manager

Customer and Address Form Fields Manager for Magento2

273.9k](/packages/magepal-magento2-form-field-manager)[mage-os/module-llm-txt

AI-powered LLMs.txt generation for Magento 2 / Mage-OS stores. Help AI systems understand your store with OpenAI-generated content.

223.3k](/packages/mage-os-module-llm-txt)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)