Download the PHP package mage2kishan/module-hero-slider without Composer

Magento 2 Hero Slider Extension: Center-Focused Homepage Carousel with Analytics (Hyva + Luma)

Add a hero carousel to your Magento 2 home page in minutes. Panth Hero Slider shows three slides at once with the active slide enlarged and neighbours peeking from each side. Each slide has its own CTA button, desktop and mobile artwork, click and view analytics, and a sort order you set in the admin. It renders identically on Hyva and Luma with no theme code changes.

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

Quick Answer

What is Panth Hero Slider? It is a Magento 2 hero slider extension that puts a center-focused carousel on your home page, with three slides visible at once, autoplay, per-slide CTA buttons, and built-in analytics that track views and clicks per slide.

What does it add to my store?

• A center-focused 3-up carousel where the active slide is enlarged and neighbour slides peek from each side.
• Per-slide CTA buttons with configurable label, background color, and text color.
• Separate desktop and mobile images per slide using a responsive <picture> element.
• Built-in analytics that track slide views and clicks per device type, with 30-day totals and a 7-day trend shown in the admin.
• CMS widget support so you can drop any slider onto any page without layout XML.

Which themes are supported? Both Hyva and Luma. The slider uses plain CSS and Splide.js with no Tailwind, Alpine, Knockout, or jQuery dependency.

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.

Visit our website: kishansavaliya.com  |  Get a quote: kishansavaliya.com/get-quote

Table of Contents

• Who Is It For
• Key Features
• Compatibility
• Installation
• Configuration
• Managing Sliders and Slides
• Placing a Slider
• Analytics
• FAQ
• Support
• About Panth Infotech
• Quick Links

Who Is It For

• Merchants who want a standout home page without hiring a developer for every banner change. Create and manage slides from the Magento admin.
• Hyva storefronts that need a carousel built without jQuery, Knockout, or RequireJS added back.
• Fashion, lifestyle, and home stores where a large hero image with a clear CTA drives category traffic.
• Stores running A/B-style experiments who want real click and view data per slide to see what works.
• Multi-store setups where each store view needs its own slider content.

Key Features

Center-Focused Carousel

• 3 slides visible at once on desktop, with the active slide enlarged and neighbours peeking from each side.
• Autoplay with a configurable interval (default 22 seconds, long enough to read each slide).
• Responsive breakpoint switch - below the configured width (default 1025px) the carousel shows one slide with pagination dots and no arrows.
• Navigation arrows on desktop, hidden automatically on mobile.

Per-Slide Content

• Desktop and mobile images per slide using a <picture> element with a max-width media query, so mobile devices get a properly sized image.
• CTA button with configurable label, background hex color, and text hex color, overlaid on the artwork.
• Link URL per slide - absolute or relative.
• Sort order and active/inactive toggle to control what appears on the storefront.

Admin Management

• Sliders - named groups with a unique identifier and per-store-view assignment.
• Slides - belong to a slider; managed in a dedicated admin grid with mass enable, disable, and delete actions.
• Image upload with an extension deny-list check to block executable file types before saving.
• CMS widget so editors can drop any slider on any CMS page or block without touching layout XML.

Analytics (Built In)

• Views and clicks tracked per slide per device class (desktop, tablet, mobile), stored anonymously with no PII.
• 30-day totals and a 7-day comparison shown on the slide edit page.
• Per-device breakdown and a 30-day daily timeline on each slide.
• CTR columns on the Manage Slides grid for a quick overview.
• Daily cron prunes rows older than the configured retention window (default 365 days).

Placement Options

• Auto-injects on the CMS home page out of the box; toggle off to place manually.
• CMS widget for any page or block.
• Layout XML using Panth\HeroSlider\Block\Slider with a slider_identifier argument.
• Renders nothing when no active slides exist, safe to leave blocks in place permanently.

Built to Last

• Splide.js loaded lazily after DOMContentLoaded, deduped across multiple sliders on the same page.
• FPC safe - the tracking endpoint uses navigator.sendBeacon and has no form_key dependency.
• Constructor DI only, no ObjectManager.
• Translation ready, every label uses Magento's __() function.

Compatibility

Installation

Composer Installation (Recommended)

Manual Installation via ZIP

1. Download the latest release from Packagist or from the product page.
2. Extract it to app/code/Panth/HeroSlider/ in your Magento install.
3. Make sure Panth_Core is installed too (required dependency).
4. Run the commands above starting from bin/magento module:enable.

Verify Installation

After install, open:

Configuration

Go to Stores -> Configuration -> Panth Infotech -> Hero Slider.

General

Analytics

Managing Sliders and Slides

Sliders

Content -> Panth Infotech -> Hero Slider -> Manage Sliders

A slider is a named group that holds one or more slides. Each slider has:

• Name - admin label only, not shown on the storefront.
• Identifier - unique key used by widgets and layout XML (lowercase letters, digits, hyphens, underscores).
• Store Views - assign to specific store views or "All Store Views".
• Active - disable to instantly hide the slider on every storefront.

Slides

Content -> Panth Infotech -> Hero Slider -> Manage Slides

Each slide accepts:

• Title - admin label, never shown on the storefront.
• Link URL - destination when the slide is clicked. Absolute (https://...) or relative (/path).
• Active and Sort Order.
• Button Label - defaults to SHOP NOW if blank.
• Button Background Color and Button Text Color - hex codes, defaults #09090C / #FFFFFF.
• Desktop Image (required) - JPG, PNG, GIF, WebP, or SVG. Recommended around 1280 x 720 px.
• Mobile Image (optional) - used below the mobile breakpoint, falls back to the desktop image.
• Image Alt Text - used for both desktop and mobile images.

Placing a Slider

Auto-inject on Home Page

With the Auto-inject on CMS Home Page setting enabled, the slider with identifier homepage_hero renders automatically inside the home page content container. No extra steps needed.

CMS Widget

1. Open any CMS page or block.
2. Insert widget and choose Panth Hero Slider.
3. Type the slider's identifier (for example homepage_hero).
4. Save the page.

Layout XML

The block renders nothing when the slider is disabled, missing, or has no active slides for the current store. Safe to leave in place permanently.

Analytics

Every slide tracks views and clicks anonymously per device class (desktop, tablet, mobile). The data shows up in two places:

• Manage Slides grid - Views (30d), Clicks (30d), and CTR (30d) columns.
• Slide edit page - a Performance card with 30-day totals, a 7-day comparison, a per-device breakdown, and a 30-day daily timeline.

The tracking endpoint (POST /panth_heroslider/track/event) is FPC safe with no form_key dependency. It uses navigator.sendBeacon so navigation is never blocked. Events are written via atomic INSERT ... ON DUPLICATE KEY UPDATE to the panth_hero_slider_stat table. No IP address, user agent, or session ID is stored.

A daily cron (runs at 03:23 UTC) prunes rows older than the configured retention window.

FAQ

Does the slider work on Hyva themes?

Yes. The slider uses plain CSS and Splide.js loaded from a CDN, with no Tailwind, Alpine.js, Knockout, or RequireJS dependency. It renders identically on Hyva and Luma.

How do I add a second slider to a category page?

Create a new slider in the admin with a different identifier (for example category_promo), add slides, and place it on the category page using either the CMS widget or layout XML.

Can I show different slides for different store views?

Yes. Each slider is assigned to one or more store views (or All Store Views). Create separate sliders and assign them to the store views you need.

Will the slider slow down my page?

No. Splide.js is loaded lazily after DOMContentLoaded from a CDN, deduped so it only loads once even if multiple sliders are on the same page. The tracking endpoint uses sendBeacon and does not block page navigation.

What image sizes should I use?

Desktop images work well at around 1280 x 720 px. For mobile, a portrait or square crop around 600 x 800 px gives a better result than scaling down a wide desktop image.

Is the analytics data stored with personal data?

No. The tracker records slide ID, date, store ID, event type (view or click), device type, and a count. No IP address, user agent, session ID, or customer ID is stored.

Can I disable analytics and just use the slider?

Yes. Set Track Views and Clicks to No in the Analytics group and the tracking endpoint will not write any rows.

Does it work with Full Page Cache?

Yes. The slider renders on the initial page load and is part of the cached HTML. The analytics tracking endpoint is a separate AJAX call that does not affect FPC.

Does Panth Hero Slider need Panth Core?

Yes. mage2kishan/module-core is a free, required dependency that Composer installs automatically.

Support

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

Ready to give your home page a hero that converts?

SEO Keywords: magento 2 hero slider, magento 2 hero slider extension, magento 2 homepage carousel, magento 2 banner slider, splide slider magento 2, hyva hero slider, hyva homepage slider, luma hero slider, magento 2 center focus carousel, magento 2 homepage slider module, magento 2 full width slider, magento 2 slider with analytics, magento 2 slide click tracking, magento 2 hero banner, magento 2 cms carousel, magento 2.4.8 hero slider, php 8.4 hero slider, mage2kishan hero slider, panth hero slider, panth infotech, hire magento developer, top rated plus upwork, kishan savaliya magento, custom magento development, magento 2 responsive slider, magento 2 hyva carousel