mjml-carousel image width issue

[mjml1982]

Hi,
mjml-carousel is not showing full width images as of container width, i am using 700px wide container and i set carousel with to 700px as well, after setting the left/right-icon value to 0px the image inside the carousel is covering the space on left side but not on the right side.

It is also showing extra space of 20px on left and right side of the gallery even if i set the padding to 0 for each element.

My image width is 700px.

Here is my code, please review and help how i can fix this issue.

<mj-container width="700px" background-color="#ffffff" padding="0 0 0 0" >
  <mj-section  padding="0 0 0 0" margin="0 0 0 0" border="1px solid #dfdfdf">
    <mj-column padding="0 0 0 0"  margin="0 0 0 0">
      <mj-carousel 
      padding="0 0 0 0"
      align="center"
      icon-width="0px"
      left-icon="none"
      right-icon="none"
      border-radius="0px" 
      tb-selected-border-color ="#ffffff"
      tb-hover-border-color = "none"
      tb-border-radius ="0px"
      background-color="#ffffff"
      width="700px">
        <mj-carousel-image src="http://iir-t.com/jptest/tag_banner1.png"  />
        <mj-carousel-image src="http://iir-t.com/jptest/tag_banner2.png"  />
        <mj-carousel-image src="http://iir-t.com/jptest/tag_banner3.png"   />
        <mj-carousel-image src="http://iir-t.com/jptest/tag_banner4.png"  />       
      </mj-carousel>
    </mj-column>
  </mj-section>
</mj-container>

Here is the screenshot of the current situation.

(http://iir-t.com/jptest/Screenshot-2018-4-26%20Screenshot.png)
Thanks.

[kmcb777]

Hi @mjml1982 thanks for reporting this.
Something was indeed preventing carousel-images from extending to more than 600px, so with your 700px wide body the image could not fill the space.
The fix will be included in one of the next versions.
For now a workaround can be made with a mj-style :

    <mj-style>
      .mj-carousel-image > img {
        width: 700px !important;
      }
    </mj-style>

[mjml1982]

Hi @kmcb777 this code fixed the left/right icon space(44px) but i still see extra 20px space at top/bottom/left/right even if i added the padding 0 0 0 0 to mjml-carousel and mj-carousel-image element.

Could you please explain how we can remove that extra 20px padding.
Thanks.

[kmcb777]

@mjml1982 ah you're on 3.3.5, you should upgrade to 4 soon :)
The above code must be in the mjml template, in the mj-head. Right after <mjml> add

  <mj-head>
    <mj-style>
      .mj-carousel-image > img {
        width: 700px !important;
      }
    </mj-style>
  </mj-head>

Btw in mjml4 you should remove

      left-icon="none"
      right-icon="none"

because it will used as img src, so if not found it will display the little icon for img not found.

Also beware, in mjml4 fixing this issue made me realize another bug : if the icon-width is set to 0 it will be ignored and default to 20px. This will be fixed at the same time.

[mjml1982]

@kmcb777 Is there any article explaining upgrading from any version to its latest version?

[mjml1982]

@kmcb777 after uprading to 4.0.5, i see the following error, could you please help fixing this.

Thanks.

[kmcb777]

@mjml1982 well this one will be fixed in 4.1 too, so if you're using watch you should actually wait for version 4.1 to upgrade, and this issue with carousel will be fixed too

[mjml1982]

@kmcb777 when we should expect this 4.1 release.😁

[kmcb777]

@mjml1982 i couldn't tell, it needs a lot of testing because there is a lot of things in it 😁

[mjml1982]

@kmcb777 Any stable version you recommend at this point?

[mjml1982]

@kmcb777 I am having issue changing the width of carousel thumbnail image, i have set the tb-width=150px and and changed the thumbnails-src url to upload different size thumbnail image for carousel image.

Now for mobile the thumbnail images taking too much space and sitting on top of each other making a big column shape, i want to align them horizontal under the main image as they show on desktop version.

Could you please explain how i can target these images in media queries and where to mention the css class.
Thanks.

[mjml1982]

@kmcb777 I have another question regarding mj-carousel, how we can auto play images in the gallery, i have seen some templates they have used carousel and they are auto playing images in the gallery, as i dont see any option to auto play images in mj-carousel documentation.

Thanks.

[iRyusa]

@mjml1982 HTML email are very limited, having a working carousel is already hard. Auto play can't be done with pure-css (may be with some css-transition, but the support would be so limited and really difficult to implement).

Note that to help you target the right item with a media query you can simply inspect the HTML with chrome or any web-dev tool so you can fight the right css selector for your need.

[kmcb777]

Hi @mjml1982 we released a new beta for mjml 4.1, which you can install with npm install mjml@next. It includes the fixes for the carousel width and the watch functionality, feel free to try it out !

[mjml1982]

Hi@kmcb777 thanks for the update i will definitely try and i am also enjoying the MJML desktop app. cheers!