Panth Hero Slider for Magento 2

• Center-focus 3-up carousel. Active slide enlarged, neighbour slides peek from the left and right.
• Responsive breakpoint switch. Below the configured pixel width: 1-slide-per-view + pagination dots, no arrows.
• Per-slide CTA button. Configurable label, background colour, text colour — overlaid on the artwork.
• Separate desktop + mobile artwork. <picture> with <source media="(max-width: 767px)"> so mobile gets a properly-sized image.
• No theme coupling. Plain CSS classes, no Tailwind / Knockout / Alpine dependency. Works on Hyva and Luma.
• Auto-injected on home page by default; toggle off to place manually.
• Admin grid + form with image upload, drag-free sort order, mass enable / disable / delete.
• Splide loaded lazily after DOMContentLoaded, deduped across multiple sliders on the same page.
• Hardened against receiver outage for the install / heartbeat reporter (Panth_Core integration).

composer require mage2kishan/module-hero-slider
bin/magento module:enable Panth_HeroSlider
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:flush

That's all that is needed for the module to register; the slider renders on the home page once you add slides.

Stores → Configuration → Panth Infotech → Hero Slider

The module is organised in three layers:

1. Sliders — top-level group with a unique identifier (e.g. homepage_hero, category_promo). A slider is assigned to one or more store views, or to "All Store Views" if it should appear everywhere.
2. Slides — belong to a slider. Each slide has its own artwork, button, link, and sort order.
3. Placement — each slider can be placed on the storefront via:

• The CMS widget (any page, any layout handle).
• Layout XML (a before="-" block in cms_index_index.xml, etc.).
• The auto-inject toggle on the home page (uses the homepage_hero slider by default).

Managing Sliders

Content → Panth Infotech → Hero Slider → Manage Sliders

Placing a slider via the CMS widget

1. Open any CMS page or block.
2. Insert widget → Panth Hero Slider.
3. Type the slider's identifier (e.g. homepage_hero).
4. Save the page.

The widget renders inline wherever you placed it.

Placing a slider via layout XML

<referenceContainer name="content">
 <block class="Panth\HeroSlider\Block\Slider"
 name="hero.category.promo"
 template="Panth_HeroSlider::slider.phtml"
 before="-">
 <arguments>
 <argument name="slider_identifier" xsi:type="string">category_promo</argument>
 </arguments>
 </block>
</referenceContainer>

The block renders nothing if the slider is disabled, missing, or has no slides for the current store — safe to leave in place permanently.

Content → Panth Infotech → Hero Slider → Manage Slides

Each slide accepts:

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

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), CTR (30d) columns.
• Slide edit page — Performance card with 30-day totals + 7-day comparison + per-device breakdown + 30-day daily timeline.

The tracking endpoint (POST /panth_heroslider/track/event) is FPC-safe (no form_key dependency), uses navigator.sendBeacon so navigation never blocks, and writes to a single counter table via atomic INSERT ... ON DUPLICATE KEY UPDATE. No PII is stored — no IP, no user agent, no session ID.

A daily cron (23 3 * * *) prunes rows older than the configured retention window (default 365 days).

Drop the block into any layout handle:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceContainer name="content.top">
 <block class="Panth\HeroSlider\Block\Slider"
 name="hero.slider"
 template="Panth_HeroSlider::slider.phtml"/>
 </referenceContainer>
 </body>
</page>

The block renders nothing if no slides are active — safe to leave in place permanently.

One additive table is created on setup:upgrade:

panth_hero_slider_slide(
 entity_id, title, link_url,
 button_label, button_bg_color, button_text_color,
 image_desktop, image_mobile, image_alt,
 sort_order, is_active,
 created_at, updated_at
)

No destructive migrations across upgrades.

bin/magento module:disable Panth_HeroSlider
composer remove mage2kishan/module-hero-slider
bin/magento setup:upgrade

Proprietary. All rights reserved by Panth Infotech.

Get a free quote in 24 hours: kishansavaliya.com/get-quote Hire on Upwork: Top Rated Plus profile