README - Mjml — ContextQMD

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.

xml

<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.

<div class="alert alert-note" role="alert"> <p>Note</p> <p><code>mj-carousel-image</code> is an "ending tag", which means that it can contain HTML code but it cannot contain other MJML components.</p> <p>More information about ending tags <a href="#ending-tags">in this section</a>.</p> </div>

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