Panth Hero Slider for Magento 2 — Center-Focused Homepage Carousel (Hyva + Luma) | Panth Infotech

A homepage hero that actually converts. Panth Hero Slider is a production-grade center-focused carousel for Magento 2 — three slides visible at once with the active slide enlarged, peek of neighbouring slides on each side, autoplay with a generous read interval, and a single-slide responsive view below the mobile breakpoint. Per-slide button styling, separate desktop and mobile artwork, and zero theme dependency.

The slider ships its own Splide assets (loaded lazily from a public CDN) and a framework-agnostic stylesheet, so it renders identically on Hyva and Luma without touching theme code. The module auto-injects into the CMS home page out of the box; turn that off and place the block manually anywhere via a layout reference if you prefer.

Key Features

• 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).

Compatibility

Installation

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.

Configuration

Stores → Configuration → Panth Infotech → Hero Slider

Sliders, Slides, and Stores

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.

Managing Slides

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.

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), 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).

Manual Placement (when auto-inject is disabled)

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.

Schema

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.

Uninstall

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

License

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