Banner Slider for Magento 2

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.

Get a free quote for your project in 24 hours — custom modules, Hyva themes, performance optimization, M1→M2 migrations, and 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

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

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.

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 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

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

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

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>

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.

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;
}

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

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.

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.

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.

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