mj-carousel

Displays a gallery of images or "carousel". Readers can interact by hovering and clicking on thumbnails depending on the email client they use.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-carousel>
          <mj-carousel-image src="https://static.mailjet.com/mjml-website/documentation/carousel-1.jpg" />
          <mj-carousel-image src="https://static.mailjet.com/mjml-website/documentation/carousel-2.jpg" />
          <mj-carousel-image src="https://static.mailjet.com/mjml-website/documentation/carousel-3.jpg" />
        </mj-carousel>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Attributes

| attribute | accepts | description | default value | | -------------------------- | ------------------------------ | ------------------------------------------------------ | --------------------------------- | | align | left center right | horizontal alignment | center | | border-radius | px % | border radius | 6px | | container-background-color | CSS color formats | column background color | | | css-class | string | class name, added to the root HTML element created | | | icon-width | px % | width of the icons on left and right of the main image | 44px | | left-icon | string | icon on the left of the main image | https://i.imgur.com/xTh3hln.png | | padding | px % | carousel padding, supports up to 4 parameters | | | padding-bottom | px % | carousel bottom padding | | | padding-left | px % | carousel left padding | | | padding-right | px % | carousel right padding | | | padding-top | px % | carousel top padding | | | right-icon | string | icon on the right of the main image | https://i.imgur.com/os7o9kz.png | | tb-border | string | border of the thumbnails in CSS border format | 2px solid transparent | | tb-border-radius | px % | border-radius of the thumbnails | 6px | | tb-hover-border-color | CSS color formats | border color of the hovered thumbnail | #fead0d | | tb-selected-border-color | CSS color formats | border color of the selected thumbnail | #ccc | | tb-width | px % | thumbnail width | | | thumbnails | visible hidden supported | display the thumbnails | hidden |

mj-carousel-image

Enables you to add and style the images in the carousel.

Attributes

| attribute | accepts | description | default value | | ---------------- | -------- | -------------------------------------------------- | ------------- | | alt | string | image description | '' | | border-radius | px % | border radius of the main image | | | css-class | string | class name, added to the root HTML element created | | | href | string | link to redirect to on click, URL format | | | rel | string | specify the rel attribute | | | src | string | URL format | | | target | string | link target on click | _blank | | tb-border | string | CSS border format | | | tb-border-radius | px % | border radius of the thumbnail | | | thumbnails-src | string | specify a different thumbnail image in URL format | | | title | string | tooltip & accessibility | |