Banner Slider for Magento 2

What you get

Key Features

Responsive Slider Engine

• Fully responsive layout, fluid widths, aspect-ratio-aware image delivery
• Multi-device images, separate desktop, tablet, and mobile image uploads per slide
• Touch & swipe gestures, mobile-friendly drag navigation on phones and tablets
• Keyboard navigation, left/right arrow key support for accessibility
• Lazy loading, images are loaded progressively to protect Core Web Vitals

Admin Slide Management

• Two-entity architecture, manage multiple Sliders, each with its own set of Slides
• Full CRUD admin grids, search, sort, filter, inline edit, and mass actions
• WYSIWYG overlay editor, rich HTML overlay content with Magento's editor
• Date scheduling, start/end dates for each slide (great for seasonal campaigns)
• Per-store visibility, scope sliders and slides to specific store views
• Sort order control, drag-and-drop style ordering via sort order field
• Sample data, pre-built demo slider to preview immediately after install

Transition Effects & Behavior

• Fade or slide, choose transition effect per slider
• Autoplay with configurable interval
• Transition speed, animation duration fully adjustable
• Infinite loop toggle
• Pause on hover toggle
• Navigation arrows (toggle)
• Pagination dots (toggle)

Hyva + Luma Dual Support

• Hyva template, Alpine.js only, zero jQuery, Tailwind-friendly classes
• Luma template, RequireJS + vanilla JS, no Slick/Owl bloat
• Automatic theme detection via Panth\Core\Helper\Theme
• Widget integration, drop sliders anywhere through the standard Magento Widget UI

Performance & Quality

• MEQP compliant, passes Adobe's Extension Quality Program
• Lightweight, no heavy third-party JS libraries
• Composer-installable, clean dependency resolution via Panth Core
• Multi-store & multi-language ready

Creating Sliders and Slides

1. Create a Slider

1. Go to Panth Infotech → Banner Slider → Manage Sliders
2. Click Add New Slider
3. Enter a unique Identifier (e.g., homepage_hero), a Title, and toggle Is Active
4. Configure transition effect, autoplay, arrows, dots, loop, and pause-on-hover
5. Click Save Slider

2. Add Slides

1. Go to Panth Infotech → Banner Slider → Manage Banners
2. Click Add New Slide
3. Select the parent Slider, upload Desktop / Tablet / Mobile images
4. Add overlay content, link URL, alt text, sort order, and optional schedule dates
5. Click Save Slide

Placing Sliders on Your Storefront

Option A, Widget UI

1. Go to Content → Widgets → Add Widget
2. Choose Banner Slider as the widget type
3. Enter the Slider Identifier (e.g., homepage_hero)
4. Pick a layout update (homepage, category, CMS page, etc.)
5. Save and flush cache

Option B, CMS Block / Page Widget Code

Insert directly into any CMS block or page:

{{widget type="Panth\BannerSlider\Block\Widget\BannerSlider" identifier="homepage_hero"}}

Option C, Layout XML

<referenceContainer name="content.top">
 <block class="Panth\BannerSlider\Block\Widget\BannerSlider" name="homepage.hero">
 <arguments>
 <argument name="identifier" xsi:type="string">homepage_hero</argument>
 </arguments>
 </block>
</referenceContainer>

Transition Effects

Panth Banner Slider supports two transition modes, selectable per slider:

Transition duration is controlled by Transition Speed (milliseconds) and can be fine-tuned via the --banner-transition-speed CSS variable.

Responsive Images

Each slide accepts three image uploads:

• Desktop image, shown above 1024px viewport width
• Tablet image (optional), shown between 640px and 1024px
• Mobile image (optional), shown below 640px

If tablet or mobile images are omitted, the desktop image is used as fallback. Use distinct mobile art direction (portrait-friendly crops, larger text) to maximize mobile conversion.

CSS Theming

All visual values are driven by CSS custom properties so you can override them from your theme's CSS without touching the module:

:root {
 --banner-height-desktop: 500px;
 --banner-height-tablet: 400px;
 --banner-height-mobile: 320px;
 --banner-border-radius: 0;
 --banner-overlay-bg: rgba(0, 0, 0, 0.25);
 --banner-content-max-width: 800px;
 --banner-transition-speed: 600ms;
 --banner-arrow-icon-size: 20px;
}

Troubleshooting

Enable Debug Mode in Panth Core Settings to get verbose logs in var/log/panth_banner_slider.log.

Compatibility

Tested on:

• Magento 2.4.8-p4 with PHP 8.4 (Hyva 1.3.x)
• Magento 2.4.7 with PHP 8.3 (Luma)
• Magento 2.4.6 with PHP 8.2 (Hyva)

Installation

Composer Installation (Recommended)

composer require mage2kishan/module-banner-slider
bin/magento module:enable Panth_Core Panth_BannerSlider
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Manual Installation via ZIP

1. Download the latest release ZIP from Packagist or the Adobe Commerce Marketplace
2. Extract the contents to app/code/Panth/BannerSlider/ in your Magento installation
3. Ensure Panth_Core is also installed (required dependency)
4. Run the same commands as above starting from bin/magento module:enable

Verify Installation

bin/magento module:status Panth_BannerSlider
# Expected output: Module is enabled

After installation, navigate to:

Admin → Panth Infotech → Banner Slider → Manage Sliders

Configuration

Panth Banner Slider ships with sensible defaults. Global settings live at Stores → Configuration → Panth Extensions → Banner Slider. Per-slider behavior is configured on each slider edit page.

Per-Slider Options

Per-Slide Options

• Desktop image (required)
• Tablet image (optional)
• Mobile image (optional)
• WYSIWYG overlay content
• Link URL (whole slide becomes clickable)
• Alt text (accessibility)
• Sort order
• Start date / End date (campaign scheduling)
• Store views

License

Panth Banner Slider is distributed under a proprietary license, see LICENSE.txt. One license covers a single Magento installation (production + staging + dev). Contact us for multi-store licensing.