← Web Components

Web Components · Global

<mmm-text-slider>

Marquee-style text strip — single or multiple text slides that loop horizontally at configurable speed. Optional wave/animation effect on each letter or word. Used for promo banners, hero kickers, and brand-statement strips.

Overview

Three input modes:

  • slides='[...]' — JSON-array of slides with per-slide text-color / background-color overrides via text-color-N / background-color-N.
  • items='[...]' — same as slides, alternative key.
  • text="…" — single static string when no slides array is given.

Animation is letter or word-level via wave-unit. Set wave-lift / wave-speed / wave-type to tune. Clickable slides link to link with target link-target.

Quick start

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

<mmm-text-slider text="FREE SHIPPING WORLDWIDE" speed="90" direction="ltr"></mmm-text-slider>

Attributes

AttributeTypeDefaultDescription
slidesJSON array—Array of slide objects.
itemsJSON array—Alias for slides.
textstring—Single string (when no slides/items).
text-color-NstringwhitePer-slide text colour override (where N is the 1-indexed slide).
background-color-NstringblackPer-slide background-colour override.
widthstring100%Strip width.
heightstring11.25remStrip height.
speednumber90Marquee speed.
directionstringltrltr or rtl.
font-sizestring2.0625remText font size.
font-weightstring300Text font weight.
text-colorstringwhiteDefault text colour.
background-colorstringblackDefault background colour.
gapstring5remGap between repeats of the text.
pause-on-hoverbooleantruePause the marquee on hover.
wave-liftstring0Vertical lift of letters / words in the wave animation.
wave-speedstring0Wave animation speed (0 = disabled).
wave-typestringsmoothWave easing — smooth, medium, or rapid.
wave-lengthstring0Wave wavelength.
wave-unitstringletterletter or word.
clickablebooleanfalseWhether the slider is a link.
linkstring#Destination URL when clickable.
link-targetstring_selfAnchor target.
background-imagestringnoneOptional background image URL.
object-fitstringcoverBackground image object-fit.
background-positionstringcenterBackground image position.

Live preview

store sample-store tag <mmm-text-slider>

Examples

1. Single static string

<mmm-text-slider text="FREE SHIPPING WORLDWIDE"></mmm-text-slider>

2. Multiple alternating slides

<mmm-text-slider
  slides='["DROP 1 — Spring 26","DROP 2 — Out now","Free shipping over ₹999"]'
  text-color="white"
  background-color="black"
  gap="8rem"
  speed="60">
</mmm-text-slider>

3. Wave animation

<mmm-text-slider
  text="Discover. Buy. Repeat."
  wave-lift="8px"
  wave-speed="0.8s"
  wave-type="bounce"
  wave-unit="word">
</mmm-text-slider>