← Web Components

Web Components · Global

<mmm-slider>

Image / content carousel built on Swiper. Per-breakpoint slides-per-view, autoplay with pause-on-hover, dots, navigation arrows, and an optional centered "prev/next image" peek mode for hero sliders. Drives every home-page banner.

Overview

Children become slides. Width and height are per-breakpoint (xl-width / xl-height, then desktop / tablet / mobile). show-prev-next-images shifts to a centred "peek" layout where the active slide is bordered by faded previews of the neighbours.

On first paint the component dispatches slider-ready so you can initialise external sync (e.g. drive PDP gallery thumbnails from a related slider).

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-slider autoplay="true" delay="4000" show-dots="true" show-nav="true">
  <img src="https://cdn.commmerce.com/sample-store/banner-1.jpg" />
  <img src="https://cdn.commmerce.com/sample-store/banner-2.jpg" />
  <img src="https://cdn.commmerce.com/sample-store/banner-3.jpg" />
</mmm-slider>

Core attributes

AttributeTypeDefaultDescription
loopbooleantrueLoop infinitely.
autoplaybooleantrueAuto-advance.
delaynumber3000Autoplay delay (ms).
pause-on-hoverbooleantruePause autoplay on hover.
show-navbooleantrueShow prev / next arrows.
show-dotsbooleantrueShow pagination dots.
show-nav-on-hoverbooleanfalseReveal arrows only on hover.
rtlbooleanfalseRight-to-left.
ltrbooleanfalseContinuous left-to-right auto-scroll (overrides standard autoplay).
scroll-speednumber2Auto-scroll speed when ltr / rtl is active.
slide-gapstring0.625remGap between slides.
split-per-slidenumber1How many actual children compose one logical "slide" (use for split-image carousels).
show-prev-next-imagesbooleanfalseCentred peek-mode showing the previous + next slides on the edges.
background-colorstring#EEESlider background.
idstring—Optional id, useful for external sync.

Responsive sizing

AttributeTypeDefaultDescription
xl-width / xl-heightstring100% / 37.5remXL viewport (>1280px).
desktop-width / desktop-heightstring100% / 34.375remDesktop (768–1280px).
tablet-width / tablet-heightstring100% / 40.625remTablet (430–768px).
mobile-width / mobile-heightstring100% / 34.375remMobile (≤430px).
xl-slides-per-viewnumber1Slides visible on XL.
desktop-slides-per-viewnumber1Desktop slides-per-view.
tablet-slides-per-viewnumber2Tablet slides-per-view.
mobile-slides-per-viewnumber1Mobile slides-per-view.
xl-center-image-widthstring80%Peek-mode centre slide width (XL).
desktop-center-image-widthstring80%Peek-mode centre slide width (desktop).
tablet-center-image-widthstring90%Peek-mode centre slide width (tablet).
mobile-center-image-widthstring100%Peek-mode centre slide width (mobile).
xl-show-nav / xl-show-dots / xl-autoplaybooleaninherits show-*Per-breakpoint overrides for the corresponding base attribute. Same set exists for desktop / tablet / mobile.

Events

Does not dispatch any custom events. The slider listens internally for loop-rendered from child <mmm-loop> elements so it can rebuild after data renders. Use the page-level data-source events (or DOM mutation hooks) if you need lifecycle signals.

Live preview

store sample-store tag <mmm-slider>

Examples

1. Hero banner slider

<mmm-slider autoplay="true" delay="5000" loop="true" show-dots="true">
  <img src="https://cdn.commmerce.com/sample-store/hero-1.jpg" />
  <img src="https://cdn.commmerce.com/sample-store/hero-2.jpg" />
</mmm-slider>

2. Centred peek-mode editorial

<mmm-slider
  show-prev-next-images="true"
  xl-center-image-width="60%"
  desktop-center-image-width="70%"
  show-dots="true"
  show-nav="false">
  <img src="..." />
  <img src="..." />
  <img src="..." />
</mmm-slider>

3. Continuous LTR marquee of brand logos

<mmm-slider
  ltr="true"
  scroll-speed="1"
  show-nav="false"
  show-dots="false"
  desktop-slides-per-view="6">
  <img src="..." />
  <!-- many more -->
</mmm-slider>