Drive conversions with beautiful, fast hero sliders. Panth Banner Slider is a production-grade, responsive banner slider for Magento 2 with full admin management, multi-device images, rich overlay content, fade/slide transitions, and native Hyva + Luma support — all placed anywhere on your storefront via a simple widget.
Panth Banner Slider gives Magento 2 merchants a complete banner carousel solution without relying on page builder hacks or bloated third-party libraries. Create unlimited sliders — each with its own set of slides, transition effect, autoplay speed, arrows, dots, and store-view scoping — and drop them on the homepage, category pages, CMS pages, or any layout handle with a single widget tag. Every slide supports separate desktop, tablet, and mobile images for pixel-perfect responsive delivery, a WYSIWYG overlay for headlines and CTAs, and start/end date scheduling for campaign automation.
The module auto-detects whether your storefront is running Hyva (Alpine.js + Tailwind) or Luma (RequireJS + Knockout) and renders the matching lightweight template, so you get the best performance on either stack with 10BC0 zero manual configuration.
Get a free quote for your project in 24 hours — custom modules, Hyva themes, performance optimization, M1→M2 migrations, and Adobe Commerce Cloud.
|
Top Rated Plus on Upwork 100% Job Success • 10+ Years Magento Experience Adobe Certified • Hyva Specialist |
Magento Development Team Custom Modules • Theme Design • Migrations Performance • SEO • Adobe Commerce Cloud |
Visit our website: kishansavaliya.com | Get a quote: kishansavaliya.com/get-quote
- Key Features
- Why Panth Banner Slider
- Compatibility
- Installation
- Configuration
- Creating Sliders and Slides
- Placing Sliders on Your Storefront
- Transition Effects
- Responsive Images
- CSS Theming
- Troubleshooting
- FAQ
- Support
- About Panth Infotech
- 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
- 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
- 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 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
- 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
Most Magento 2 banner modules either ship a bloated jQuery carousel library (Slick, Owl) that tanks Core Web Vitals on mobile, or they are page-builder-only widgets that cannot scale past a single homepage slider. Panth Banner Slider is built for merchants who need:
- Multiple sliders across different pages (homepage hero, category banners, CMS promo blocks)
- Responsive delivery with separate mobile art direction — not just CSS-scaled desktop images
- Hyva-native performance without stripping features
- Schedulable campaigns that auto-activate and expire
- Clean admin UX under the unified Panth Infotech menu
No database bloat, no forced page builder, no jQuery plugins — just a fast, maintainable slider that works on both Hyva and Luma out of the box.
| Requirement | Versions Supported |
|---|---|
| Magento Open Source | 2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8 |
| Adobe Commerce | 2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8 |
| Adobe Commerce Cloud | 2.4.4 — 2.4.8 |
| PHP | 8.1.x, 8.2.x, 8.3.x, 8.4.x |
| MySQL | 8.0+ |
| MariaDB | 10.4+ |
| Hyva Theme | 1.3+ (Alpine.js template) |
| Luma Theme | Native support (RequireJS template) |
| Required Dependency | mage2kishan/module-core |
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)
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- Download the latest release ZIP from Packagist or the Adobe Commerce Marketplace
- Extract the contents to
app/code/Panth/BannerSlider/in your Magento installation - Ensure
Panth_Coreis also installed (required dependency) - Run the same commands as above starting from
bin/magento module:enable
bin/magento module:status Panth_BannerSlider
# Expected output: Module is enabledAfter installation, navigate to:
Admin → Panth Infotech → Banner Slider → Manage Sliders
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.
| Option | Default | Description |
|---|---|---|
| Is Active | Yes | Enable or disable the slider globally |
| Autoplay | Yes | Auto-advance slides |
| Autoplay Speed | 5000 ms | Delay between slide transitions |
| Transition Speed | 600 ms | Animation duration |
| Effect | fade | fade or slide transition |
| Loop | Yes | Loop back to first slide after the last |
| Show Arrows | Yes | Display previous/next arrows |
| Show Dots | Yes | Display pagination dots |
| Pause on Hover | Yes | Pause autoplay on mouse hover |
- 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
- Go to Panth Infotech → Banner Slider → Manage Sliders
- Click Add New Slider
- Enter a unique Identifier (e.g.,
homepage_hero), a Title, and toggle Is Active - Configure transition effect, autoplay, arrows, dots, loop, and pause-on-hover
- Click Save Slider
- Go to Panth Infotech → Banner Slider → Manage Banners
- Click Add New Slide
- Select the parent Slider, upload Desktop / Tablet / Mobile images
- Add overlay content, link URL, alt text, sort order, and optional schedule dates
- Click Save Slide
- Go to Content → Widgets → Add Widget
- Choose Banner Slider as the widget type
- Enter the Slider Identifier (e.g.,
homepage_hero) - Pick a layout update (homepage, category, CMS page, etc.)
- Save and flush cache
Insert directly into any CMS block or page:
{{widget type="Panth\BannerSlider\Block\Widget\BannerSlider" identifier="homepage_hero"}}
<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>Panth Banner Slider supports two transition modes, selectable per slider:
| Effect | Description | Best For |
|---|---|---|
| fade | Slides cross-fade in place | Minimal, brand-focused hero banners |
| slide | Classic horizontal slide animation | Promo carousels, product category banners |
Transition duration is controlled by Transition Speed (milliseconds) and can be fine-tuned via the --banner-transition-speed CSS variable.
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.
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;
}| Issue | Cause | Resolution |
|---|---|---|
| Slider not rendering | Slider inactive or no active slides | Toggle slider Is Active and verify at least one slide is active |
| Wrong identifier | Widget identifier does not match slider identifier | Check Manage Sliders list and copy the exact identifier |
| Images missing | Media permissions on pub/media/bannerslider/ |
Fix directory permissions, re-upload if needed |
| Slides not showing on schedule | Incorrect dates or server timezone | Use Y-m-d format and verify server timezone |
| Old template after theme switch | Cached layout/view files | Run bin/magento cache:flush and redeploy static content |
| Widget missing from dropdown | Module not registered | Run bin/magento setup:upgrade && bin/magento cache:flush |
Enable Debug Mode in Panth Core Settings to get verbose logs in var/log/panth_banner_slider.log.
Yes. Create as many sliders as you want in the admin and place each one via its own widget or layout block. Each slider maintains independent configuration and slides.
Yes. Panth Banner Slider ships a native Hyva template using Alpine.js — no jQuery, no RequireJS shim. The module auto-detects Hyva and swaps the template automatically.
Yes. A separate Luma template is included with RequireJS-based initialization. No Slick or Owl Carousel dependencies are required.
Yes. Every slide has optional Start Date and End Date fields. Slides automatically appear and disappear based on the configured schedule.
Yes. Each slide has a Store View selector, so you can scope slides to specific stores in multi-store setups.
Yes. Images use proper alt attributes, slides render as real <img> tags (not background images), and links are real <a> tags that crawlers can follow.
The module is optimized for LCP — the first slide image is eagerly loaded while subsequent slides are lazy loaded. On Hyva, there is no jQuery penalty; on Luma, only the minimal required JS is shipped.
Yes. The module uses Magento's standard __() translation function, so every user-facing string can be translated via the standard i18n workflow.
Yes. Override the template files in your theme via standard Magento theme fallback (app/design/frontend/<Vendor>/<theme>/Panth_BannerSlider/templates/...).
Yes. mage2kishan/module-core is a required dependency and is installed automatically by Composer. It is free forever and provides the unified admin menu and shared utilities for all Panth extensions.
| Channel | Contact |
|---|---|
| kishansavaliyakb@gmail.com | |
| Website | kishansavaliya.com |
| +91 84012 70422 | |
| GitHub Issues | github.com/mage2sk/module-banner-slider/issues |
| Upwork (Top Rated Plus) | Hire Kishan Savaliya |
| Upwork Agency | Panth Infotech |
Response time: 1-2 business days.
Looking for custom Magento module development, Hyva theme customization, store migrations, or performance optimization? Get a free quote in 24 hours:
Specializations:
- 🛒 Magento 2 Module Development — custom extensions following MEQP standards
- 🎨 Hyva Theme Development — Alpine.js + Tailwind CSS, lightning-fast storefronts
- 🖌️ Luma Theme Customization — pixel-perfect designs, responsive layouts
- ⚡ Performance Optimization — Core Web Vitals, page speed, caching strategies
- 🔍 Magento SEO — structured data, hreflang, sitemaps, meta optimization
- 🛍️ Checkout Optimization — one-page checkout, conversion rate optimization
- 🚀 M1 to M2 Migrations — data migration, custom feature porting
- ☁️ Adobe Commerce Cloud — deployment, CI/CD, performance tuning
- 🔌 Third-party Integrations — payment gateways, ERP, CRM, marketing tools
Industries served: Fashion & Apparel, Electronics, Health & Beauty, Food & Beverage, Home & Garden, B2B Wholesale, Multi-vendor Marketplaces.
Panth Banner Slider is distributed under a proprietary license — see LICENSE.txt. One lice
6B36
nse covers a single Magento installation (production + staging + dev). Contact us for multi-store licensing.
Built and maintained by Kishan Savaliya — kishansavaliya.com — a Top Rated Plus Magento developer on Upwork with 10+ years of eCommerce experience.
Panth Infotech is a Magento 2 development agency specializing in high-quality, security-focused extensions and themes for both Hyva and Luma storefronts. Our extension suite covers SEO, performance, checkout, product presentation, customer engagement, and store management — over 34 modules built to MEQP standards and tested across Magento 2.4.4 to 2.4.8.
Browse the full extension catalog on the Adobe Commerce Marketplace or Packagist.
- 🌐 Website: kishansavaliya.com
- 💬 Get a Quote: kishansavaliya.com/get-quote
- 👨💻 Upwork Profile (Top Rated Plus): upwork.com/freelancers/~016dd1767321100e21
- 🏢 Upwork Agency: upwork.com/agencies/1881421506131960778
- 📦 Packagist: packagist.org/packages/mage2kishan/module-banner-slider
- 🐙 GitHub: github.com/mage2sk/module-banner-slider
- 🛒 Adobe Marketplace: commercemarketplace.adobe.com
- 📧 Email: kishansavaliyakb@gmail.com
- 📱 WhatsApp: +91 84012 70422
Ready to upgrade your Magento 2 store?
SEO Keywords: magento 2 banner slider, magento 2 hero slider, magento 2 homepage banner, responsive banner slider magento, magento 2 carousel extension, magento 2 slider widget, magento 2 image slider, magento 2 slideshow, hyva banner slider, hyva hero slider, luma banner slider, alpine js slider magento, magento 2.4.8 slider, magento 2.4.7 slider, panth banner slider, panth infotech, magento 2 banner widget, magento 2 CMS slider, magento 2 responsive slideshow, magento 2 promotional banner, magento 2 homepage carousel, magento 2 category banner, magento 2 slide scheduling, magento 2 banner management, magento 2 multi store slider, fade slide transition magento, magento 2 touch swipe slider, mobile friendly slider magento, magento 2 banner alt text, magento 2 CTA banner, magento 2 marketing banner, mage2kishan, mage2sk, hire magento developer, top rated plus magento freelancer, kishan savaliya magento, magento 2 hyva development, magento 2 luma customization, magento 2 performance optimization, magento 2 SEO services, M1 to M2 migration, adobe commerce cloud expert