Carousel

It displays a sliding carousel

Properties

children

slideWidth

string | undefined

120px

className

string | undefined

MML string

<mml>
  <carousel>
    <item>
        <image src="https://getstream.github.io/mml-react/public/door.jpg" />
        <md>**Door**</md>
        <text>Locks, hinges, screens, stuck...</text>
        <button name="action" value="door">Select</button>
    </item>
    <item>
        <image src="https://getstream.github.io/mml-react/public/window.jpg" />
        <md>**Window**</md>
        <text>Glass, slide, locks, broken, damage...</text>
        <button name="action" value="window">Select</button>
    </item>
    <item>
        <image src="https://getstream.github.io/mml-react/public/sliding-door.jpg" />
        <md>**Sliding door**</md>
        <text>Locks, hinges, screens, stuck...</text>
        <button name="action" value="sliding-door">Select</button>
    </item>
  </carousel>
</mml>

Basic usage

MrLahey | Service

Hi Ricky. I am Mr. Lahey’s messaging assistant

So, what can I help you with?

22:30 pm

<MML
  source={`
  <mml>
    <carousel>
      <item>
          <image src="https://getstream.github.io/mml-react/public/door.jpg" />
          <md>**Door**</md>
          <text>Locks, hinges, screens, stuck...</text>
          <button name="action" value="door">Select</button>
      </item>
      <item>
          <image src="https://getstream.github.io/mml-react/public/window.jpg" />
          <md>**Window**</md>
          <text>Glass, slide, locks, broken, damage...</text>
          <button name="action" value="window">Select</button>
      </item>
      <item>
          <image src="https://getstream.github.io/mml-react/public/sliding-door.jpg" />
          <md>**Sliding door**</md>
          <text>Locks, hinges, screens, stuck...</text>
          <button name="action" value="sliding-door">Select</button>
      </item>
    </carousel>
  </mml>
`}
/>

<MML
  source={`
  <mml>
    <carousel>
      <item>
          <image src="https://getstream.github.io/mml-react/public/door.jpg" />
          <md>**Door**</md>
          <text>Locks, hinges, screens, stuck...</text>
          <button name="action" value="door">Select</button>
      </item>
      <item>
          <image src="https://getstream.github.io/mml-react/public/window.jpg" />
          <md>**Window**</md>
          <text>Glass, slide, locks, broken, damage...</text>
          <button name="action" value="window">Select</button>
      </item>
      <item>
          <image src="https://getstream.github.io/mml-react/public/sliding-door.jpg" />
          <md>**Sliding door**</md>
          <text>Locks, hinges, screens, stuck...</text>
          <button name="action" value="sliding-door">Select</button>
      </item>
    </carousel>
  </mml>
`}
/>

With custom slides width