← Web Components

Web Components · Global

<mmm-testimonial>

Customer-review carousel — star rating, rating number, name, body, plus up to two reviewer images. Responsive sizing per breakpoint, autoplay with pause-on-hover, optional continuous LTR / RTL marquee, and an outer slides-wrapper width / height for hero-style placement.

Overview

Each child becomes a review slide. Toggle visibility of stars, rating-number, avatar image, and secondary images independently. Per-breakpoint slides-per-view (desktop-split-per-view / tablet / mobile) drives the carousel layout.

Quick start

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

<mmm-testimonial autoplay="true" desktop-split-per-view="3" show-stars="true">
  <article>
    <img src="..." />
    <p>"Best fit I've ever owned."</p>
    <small>— Asha M.</small>
  </article>
  <!-- more reviews -->
</mmm-testimonial>

Attributes

Grouped by purpose. Per-breakpoint variants exist for sizing and slides-per-view.

AttributeTypeDefaultDescription
desktop-width / desktop-heightstring100% / 37.5remCarousel viewport at desktop.
tablet-width / tablet-heightstring100% / 25remTablet viewport.
mobile-width / mobile-heightstring100% / 25remMobile viewport.
backgroundstring#eeeCarousel background.
desktop-split-per-viewnumber3Desktop slides visible at once.
tablet-split-per-viewnumber1Tablet slides visible.
mobile-split-per-viewnumber1Mobile slides visible.
slide-per-viewnumber1How many slides advance per swipe.
slide-gapstring0.625remGap between slides.
autoplaybooleantrueAuto-advance.
autoplay-delaynumber3000Autoplay delay (ms).
loopbooleantrueLoop infinitely.
pause-on-hoverbooleantruePause autoplay on hover.
show-dotsbooleantruePagination dots.
show-navbooleantruePrev / next arrows.
show-starsbooleantrueShow the star rating row.
show-rating-numberbooleantrueShow the numeric "4.8 / 5" line.
show-imagebooleantrueShow the primary reviewer image.
show-image-1booleantrueShow the first secondary image.
show-image-2booleantrueShow the second secondary image.
ltrbooleantrueLeft-to-right continuous auto-scroll mode.
rtlbooleantrueRight-to-left continuous auto-scroll mode.
scroll-speednumber2Continuous-scroll speed.
font-familystringtheme description font / inheritSlide font family.
slides-wrapper-desktop-width / -heightstring100% / 25remOuter wrapper dimensions on desktop.
slides-wrapper-tablet-widthstring95%Outer wrapper width on tablet.

Live preview

store sample-store tag <mmm-testimonial>

Examples

1. 3-up desktop / 1-up mobile

<mmm-testimonial
  desktop-split-per-view="3"
  tablet-split-per-view="2"
  mobile-split-per-view="1"
  autoplay="true">
  <!-- review slides -->
</mmm-testimonial>

2. Continuous brand-trust scroller

<mmm-testimonial
  ltr="true"
  scroll-speed="1"
  show-nav="false"
  show-dots="false"
  show-rating-number="false"
  desktop-split-per-view="4">
  <!-- avatar quotes -->
</mmm-testimonial>

3. Compact, image-only quote cards

<mmm-testimonial
  show-image-1="false"
  show-image-2="false"
  desktop-split-per-view="2"
  slide-gap="1.5rem">
</mmm-testimonial>