The MJML Carousel seem to be broken when sending from Mautic email. Only the first image is displayed.
It’s not the MJML but something in Mautic broke it or MJML engine issue in Mautic? I test the same MJML code in another email application and it working as intended … same code below sent in a different application other than Mautic
Did I miss something or is it something in Mautic or the MJML engine within Mautic?
If I convert it into HTML with my Desktop MJML engine and paste the HTML directly into “Code Mode” email builder then it works as intended when I sent myself a test email directly from Mautic.
I still prefer use MJML for all my email templating and editing needs
Can it be fixed?
For those who want to try it out … I whipped up a sample MJML email that have 3 elements in it. Hero, Carousel slide show, and social icon.
Here are the MJML code
<mjml>
<mj-head>
<mj-attributes>
<mj-text align="center" color="#555" />
<mj-section background-color="#fff" />
</mj-attributes>
</mj-head>
<mj-body background-color="#eee">
<mj-hero mode="fixed-height" height="469px" background-width="600px" background-height="469px" background-url="https://warehouse.agwm.org/repository/image/mjml/herobg.jpg" background-color="#2a3448" padding="100px 0px">
<mj-text padding="20px" color="#000" font-family="Helvetica" align="center" font-size="45px" line-height="45px" font-weight="900"> Combined Missions Connect 2023 </mj-text>
<mj-button href="#" align="center"> ORDER YOUR TICKET NOW </mj-button>
</mj-hero>
<mj-section>
<mj-column>
<mj-text align="left"> There was something in the sky. What exactly was up there wasn't immediately clear. But there was definitely something in the sky and it was getting bigger and bigger. </mj-text>
</mj-column>
<mj-column>
<mj-text align="left"> The rain and wind abruptly stopped, but the sky still had the gray swirls of storms in the distance. Dave knew this feeling all too well. The calm before the storm. He only had a limited amount of time before all Hell broke loose, but he stopped to admire the calmness. Maybe it would be different this time, he thought, with the knowledge deep within that it wouldn't. </mj-text>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-carousel>
<mj-carousel-image src="https://warehouse.agwm.org/repository/image/mjml/ss1.jpg" />
<mj-carousel-image src="https://warehouse.agwm.org/repository/image/mjml/ss2.jpg" />
<mj-carousel-image src="https://warehouse.agwm.org/repository/image/mjml/ss3.jpg" />
<mj-carousel-image src="https://warehouse.agwm.org/repository/image/mjml/ss4.jpg" />
<mj-carousel-image src="https://warehouse.agwm.org/repository/image/mjml/ss5.jpg" />
</mj-carousel>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-text align="left"> The wave crashed and hit the sandcastle head-on. The sandcastle began to melt under the waves force and as the wave receded, half the sandcastle was gone. The next wave hit, not quite as strong, but still managed to cover the remains of the sandcastle and take more of it away. The third wave, a big one, crashed over the sandcastle completely covering and engulfing it. When it receded, there was no trace the sandcastle ever existed and hours of hard work disappeared forever. </mj-text>
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-social font-size="15px" icon-size="30px" mode="horizontal">
<mj-social-element name="facebook" href="https://mjml.io/"> Facebook </mj-social-element>
<mj-social-element name="google" href="https://mjml.io/"> Google </mj-social-element>
<mj-social-element name="twitter" href="https://mjml.io/"> Twitter </mj-social-element>
</mj-social>
</mj-column>
</mj-section>
</mj-body>
</mjml>