README

Panth Banner Slider for Magento 2 — Responsive Hero Slider Widget (Hyva + Luma) | Panth Infotech

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 zero manual configuration.

🚀 Need Custom Magento 2 Development?

Get a free quote for your project in 24 hours — custom modules, Hyva themes, performance optimization, M1→M2 migrations, and Adobe Commerce Cloud.

🏆 Kishan Savaliya

Top Rated Plus on Upwork

100% Job Success • 10+ Years Magento Experience Adobe Certified • Hyva Specialist

🏢 Panth Infotech Agency

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

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

Why Panth Banner Slider

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.

Compatibility

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)

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

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_Core is also installed (required dependency)
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

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

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

Creating Sliders and Slides

1. Create a Slider

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

2. Add Slides

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

Placing Sliders on Your Storefront

Option A — Widget UI

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

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:

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.

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

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.

FAQ

Can I have more than one banner slider on the same page?

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.

Does it work with Hyva Theme?

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.

Does it work with the default Luma theme?

Yes. A separate Luma template is included with RequireJS-based initialization. No Slick or Owl Carousel dependencies are required.

Can I schedule slides for a promotion?

Yes. Every slide has optional Start Date and End Date fields. Slides automatically appear and disappear based on the configured schedule.

Can I display different slides per store view?

Yes. Each slide has a Store View selector, so you can scope slides to specific stores in multi-store setups.

Is the slider SEO friendly?

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.

Does it affect Core Web Vitals / page speed?

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.

Can I translate the admin labels?

Yes. The module uses Magento's standard __() translation function, so every user-facing string can be translated via the standard i18n workflow.

Can I customize the slider template?

Yes. Override the template files in your theme via standard Magento theme fallback (app/design/frontend/<Vendor>/<theme>/Panth_BannerSlider/templates/...).

Do I need Panth Core?

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.

Support

Channel	Contact
Email	kishansavaliyakb@gmail.com
Website	kishansavaliya.com
WhatsApp	+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.

💼 Need Custom Magento Development?

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.

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.

About Panth Infotech

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.

Quick Links

🌐 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

mage2kishan / module-banner-slider

Maintainers

Package info

Statistics

Security