README

Magento 2 Banner Slider Extension: Responsive Hero Slider Widget (Hyva + Luma)

Put beautiful, fast hero banners on any page in minutes. Panth Banner Slider gives Magento 2 merchants a full admin UI to create unlimited sliders, each with its own slides, separate desktop/tablet/mobile images, HTML overlay content, and transition settings. Drop a slider anywhere via a standard Magento widget. Native templates for Hyva (Alpine.js) and Luma are both included.

Product page: kishansavaliya.com/magento-2-banner-slider.html

Quick Answer

What is Panth Banner Slider? It is a Magento 2 banner slider extension that lets merchants build and manage responsive hero sliders through the admin, without page builder or third-party jQuery plugins.

What does it add to my store?

An admin grid to manage sliders (title, identifier, transition settings) and a separate grid to manage slides (images, overlay, schedule).
Separate desktop, tablet, and mobile images per slide for proper responsive delivery.
HTML overlay content (headlines, CTAs) via the WYSIWYG editor on each slide.
Fade or slide transition, autoplay, loop, navigation arrows, pagination dots, and pause-on-hover, all set per slider.
Date scheduling so slides activate and expire automatically.
Widget integration to place any slider on a CMS page, block, category, or any layout handle.

Which themes are supported? Both Hyva (Alpine.js, no jQuery) and Luma. The right template is picked automatically based on the active theme.

What does it need? Magento 2.4.4 to 2.4.8, PHP 8.1 to 8.4, and the free mage2kishan/module-core package.

Need Custom Magento 2 Development?

Get a free quote for your project in 24 hours for custom modules, Hyva themes, performance work, M1 to 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

Who Is It For
Key Features
Compatibility
Installation
Configuration
How It Works
FAQ
Support
About Panth Infotech
Quick Links

Who Is It For

Merchants who run promotions and want campaign banners to go live and expire on a schedule without a developer.
Hyva storefronts that need a slider built with Alpine.js only, with no jQuery penalty on Core Web Vitals.
Stores with multiple landing pages that need different sliders on the homepage, category pages, and CMS pages at the same time.
Developers setting up a store who want a clean, widget-based banner solution with proper mobile art direction rather than a CSS-scaled desktop image on mobile.
Multi-store setups where each store view needs different banners in different languages.

Key Features

Slider Management in Admin

Two-entity architecture: a Slider record holds settings, and Slide records hold images and content. One slider can have many slides.
Full CRUD admin grids for both Sliders and Slides with search, sort, and filter.
Slider identifier is a short text key (for example homepage_hero) used in widgets and layout XML.
Per-slider settings stored in the panth_banner_slider table: autoplay, autoplay speed, transition speed, effect, loop, arrows, dots, pause on hover, and store view.

Slide Content and Images

Desktop, tablet, and mobile image uploads per slide. If tablet or mobile is not set, the desktop image is used.
WYSIWYG HTML overlay for headlines, text, and call-to-action buttons on each slide.
Link URL and link target to make the whole slide clickable.
Alt text field for accessibility and SEO.
Sort order to control slide sequence.
Start date and end date for automated campaign scheduling.
Store view scoping so slides can be limited to specific store views.

Transition Effects and Behavior

Fade or slide transition, selectable per slider.
Autoplay with configurable millisecond interval.
Transition speed in milliseconds, independently adjustable.
Infinite loop toggle.
Pause on hover toggle.
Navigation arrows (toggle).
Pagination dots (toggle).

Storefront Placement

Magento Widget UI at Content > Widgets. Pick Banner Slider as widget type, enter the identifier, and assign it to a layout handle.
CMS block or page widget tag for direct insertion.
Layout XML block for developer-controlled placement in theme files.

Hyva + Luma Ready

Native Hyva template built with Alpine.js, no jQuery, no RequireJS, Tailwind-friendly markup.
Native Luma template using RequireJS-based initialization, no Slick or Owl Carousel dependencies.
Theme detected automatically through Panth\Core\Helper\Theme.

Performance and Code Quality

No heavy third-party JS libraries. The Hyva template is Alpine.js only. The Luma template uses minimal vanilla JS.
First slide image loads eagerly for LCP; subsequent slides are lazy loaded.
Touch and swipe navigation for phones and tablets.
Keyboard navigation via arrow keys.
CSS custom properties for visual overrides without editing module files.
Clean constructor DI only, MEQP-style code.
Translation ready. Every label uses __().

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 to 2.4.8
PHP	8.1.x, 8.2.x, 8.3.x, 8.4.x
Hyva Theme	1.3+ (native Alpine.js support)
Luma Theme	Native support
Required Dependency	`mage2kishan/module-core` (free)

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 from Packagist or from the product page.
Extract it to app/code/Panth/BannerSlider/ in your Magento install.
Make sure Panth_Core is installed too (required dependency).
Run the commands above starting from bin/magento module:enable.

Verify Installation

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

After install, open:

Admin → Panth Infotech → Banner Slider → Manage Sliders

Configuration

Panth Banner Slider has no global system.xml settings page. All slider behavior is configured per slider on its edit form in the admin grid.

Go to Panth Infotech → Banner Slider → Manage Sliders → Add New Slider (or edit an existing one).

Setting	Default	Description
Title	(required)	Display name for this slider in the admin.
Identifier	(required)	Short text key used in the widget and layout XML, for example `homepage_hero`.
Is Active	Yes	Enable or disable this slider on the storefront.
Autoplay	Yes	Auto-advance slides at the configured interval.
Autoplay Speed	5000 ms	Time in milliseconds between slide advances.
Transition Speed	600 ms	Animation duration in milliseconds.
Effect	fade	`fade` or `slide` transition.
Loop	Yes	Loop back to the first slide after the last.
Show Arrows	Yes	Display previous/next navigation arrows.
Show Dots	Yes	Display pagination dot indicators.
Pause on Hover	Yes	Pause autoplay when the mouse is over the slider.
Store View	All Store Views	Scope this slider to specific store views.

Each Slide (managed under Panth Infotech → Banner Slider → Manage Banners) has:

Setting	Description
Desktop Image	Required. Shown above 1024 px viewport width.
Tablet Image	Optional. Shown between 640 px and 1024 px; falls back to desktop image if not set.
Mobile Image	Optional. Shown below 640 px; falls back to desktop image if not set.
Content HTML	WYSIWYG overlay with headlines and CTAs.
Link URL	Makes the full slide clickable.
Link Target	`_self` or `_blank`.
Alt Text	Image alt attribute for accessibility and SEO.
Sort Order	Controls slide order within the slider.
Start Date	Date from which the slide is shown.
End Date	Date after which the slide is hidden.
Store View	Scope this slide to specific store views.
Is Active	Enable or disable this slide.

How It Works

A merchant creates a Slider record in the admin with an identifier such as homepage_hero and sets the transition, autoplay, arrows, dots, and loop options.
One or more Slides are added, each with images, optional overlay HTML, a link, and optional schedule dates.
The slider is placed on a storefront page through the Widget UI, a CMS block widget tag, or layout XML, referencing the slider identifier.
On page load, the block class reads the slider and its active slides from the panth_banner_slider and panth_banner_slide tables.
If the active theme is Hyva, the Alpine.js template is rendered. If the theme is Luma, the RequireJS template is rendered.
The first slide image loads eagerly for fast LCP. Remaining slide images are lazy loaded.
Slide visibility is filtered by the active store view and the current date against the start/end date fields.

FAQ

Does it work on Hyva themes?

Yes. Panth Banner Slider ships a native Alpine.js template for Hyva with no jQuery, Knockout, or RequireJS. The module reads the active theme through Panth_Core and uses the correct template automatically.

Can I show different sliders on different pages?

Yes. Create one slider per location with a unique identifier, then place each one with its own widget or layout block. There is no limit on the number of sliders.

Can I schedule slides for a campaign?

Yes. Every slide has a Start Date and End Date field. The slide appears only within that date range, so you can prepare seasonal banners in advance and let them activate and expire on their own.

Do I need separate images for mobile?

No, but it helps. If you upload only the desktop image, it is used on all screen sizes. Uploading a dedicated mobile image (portrait-friendly crop) gives better mobile Core Web Vitals and conversion.

Will the slider slow down my pages?

The first slide image is loaded eagerly so it counts toward LCP, not against it. The remaining slide images are lazy loaded. On Hyva there is no jQuery at all. On Luma only the minimal required JS is loaded.

Can I put more than one slider on the same page?

Yes. Each slider is a separate widget block with its own identifier. They work independently on the same page.

Is it SEO friendly?

Yes. Slides use real <img> tags with proper alt attributes and real <a> tags with valid href values, so crawlers can read them correctly.

Can I translate the admin labels?

Yes. The module uses Magento's __() function for all user-facing strings, so you can add translations through the standard i18n workflow.

Does Panth Banner Slider need Panth Core?

Yes. mage2kishan/module-core is a required dependency. Composer installs it for you automatically. It is free.

Support

Channel	Contact
Product Page	kishansavaliya.com/magento-2-banner-slider.html
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 work, store migrations, or performance tuning? Get a free quote in 24 hours:

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 that builds high quality, security focused extensions and themes for both Hyva and Luma storefronts. The extension suite covers SEO, performance, checkout, product presentation, customer engagement, and store management, with each module built to MEQP standards and tested across Magento 2.4.4 to 2.4.8.

Browse the full extension catalog on our Magento extensions page or on Packagist.

Quick Links

Resource	Link
Product Page	magento-2-banner-slider.html
Packagist	mage2kishan/module-banner-slider
GitHub	mage2sk/module-banner-slider
Website	kishansavaliya.com
Free Quote	kishansavaliya.com/get-quote
Upwork (Top Rated Plus)	Hire Kishan Savaliya
Upwork Agency	Panth Infotech
Email	kishansavaliyakb@gmail.com
WhatsApp	+91 84012 70422

Ready to add fast, admin-managed banners to your store?

SEO Keywords: magento 2 banner slider, magento 2 banner slider extension, magento 2 hero slider, magento 2 homepage slider, responsive banner slider magento, magento 2 slider widget, magento 2 image slider, magento 2 carousel extension, magento 2 slideshow, magento 2 banner widget, hyva banner slider, hyva hero slider, alpine js slider magento, luma banner slider, magento 2 cms slider, magento 2 promotional banner, 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.4.8 slider, magento 2.4.7 slider, panth banner slider, panth infotech, mage2kishan, hire magento developer, top rated plus magento freelancer, kishan savaliya magento, magento 2 hyva development, custom magento 2 banner slider

mage2kishan / module-banner-slider

Maintainers

Package info

Statistics

Security