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 | string | 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 | string | 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.
Note
mj-carousel-image is an "ending tag", which means that it can contain HTML code but it cannot contain other MJML components.
More information about ending tags in this section.
Attributes
| attribute | accepts | description | default value |
|---|---|---|---|
| alt | string | image description | '' |
| border-radius | string | 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 | string | border radius of the thumbnail | |
| thumbnails-src | string | specify a different thumbnail image in URL format | |
| title | string | tooltip & accessibility |