Commmerce Docs

What it is

A general-purpose slider for media, products, testimonials, or any HTML children.

When to use

  • Hero image carousels
  • Product card carousels
  • Testimonial sliders

Attributes

AttributeTypeDefaultDescription
data-slides-per-viewnumber1Visible slides at once.
data-autoplaybooleanfalseAuto-advance interval.
data-loopbooleanfalseWrap from last to first slide.
idstringUnique element identifier.
classstringCustom CSS class list.
hiddenbooleanfalseHide the element without removing it from the DOM.

Examples

Hero slider

Auto-playing hero carousel.

<mmm-slider data-autoplay="true">
  <img src="/hero/1.jpg" />
  <img src="/hero/2.jpg" />
  <img src="/hero/3.jpg" />
</mmm-slider>