Marinus Klasen

Marinus Klasen

  • WordStress
  • Development
  • Consultancy
  • Developer Resources
  • Blog
  • Contact

May 18, 2022

Justified auto width and height in Media Carousel Widget in Elementor

Marinus Klasen

Update: It appeared the solution below still had some horizontal scrolling/spacing issues. I’ve created a plugin to solve these.

In order to solve these issues once and for all, I’ve created a plugin that updates the Swiper instance created by Elementor.

Click here to download the plugin, or visit the Github repository

After activating the plugin, add the “auto-width” class to your Elementor component and set the image height with this custom CSS:

selector .swiper-slide img {
    height: 400px;
}

Was this helpful to you?

I’d love to hear from you! Let me know if you liked this solution via Twitter, send me an e-mail, leave a comment in the bottom of this post or star the repository on Github.

View the Github repository

Outdated information below.

The plugin I created after initially publishing this blog post will really solve the issue.

Aside from the websites and plugins I build for clients, I also work with WordPress designers & developers to customize features that themes and plugins do not have out-of-the-box.

In this case, Annika, from Team Rood, asked me if I could customize the slider so that images in the carousel would use all the height, and show in full width while respecting the image ratio.

The issue: Images do not have the same height

The solution: Images do have the same height

How was this accomplished?

Elementor allows adding custom CSS to any component you add, you can implement the fix by applying the follow custom CSS to the carousel components:

selector .swiper-slide {
    width: auto !important;
    margin-right: 9px;
    max-width: inherit !important;
}

selector .swiper-slide img {
    height: 400px;
}

Pretty easy, right?!

About Marinus Klasen

Marinus has been working in software/web development for more than a decade. Since 2020 his attention shifted on sharing knowledge and developing products and tools for sharing knowledge.

Marinus Klasen on Twitter

Looking for a WordPress expert?
Hire top notch developers on Codeable!

Consult an expert

Comments

  1. Annika says

    May 19, 2022 at 11:03 am

    My client and I are very happy with your help Marinus! This is exactly what we were looking for.

    Reply
  2. blickwerker says

    June 29, 2022 at 3:46 pm

    Thank you for sharing your solution, that was exactly what i was looking for to access the Elementor swiper params.

    Reply
  3. Bram says

    October 4, 2022 at 7:57 am

    I’ve been looking for this for some time now. Does this also eliminate the problem of unevenly height images in the slider? That doesn’t work in Elementor. The images are skewed.

    Reply
    • Marinus Klasen says

      October 9, 2022 at 11:11 am

      Yes, but you do have to add a bit of CSS for that, see the top of the post for a code snippet!

      Reply
  4. Martina says

    October 11, 2022 at 11:43 am

    The code works for me. The plugin does not, so I am very grateful for the above code. As a photographer the way my images are presented is very important. Huge thanks Marinus!

    Reply
    • Marinus Klasen says

      October 11, 2022 at 11:52 am

      Hi Martina,

      Thanks for letting me know! Could you let me know what doesn’t work in the plugin?

      / Marinus

      Reply
  5. Karen says

    October 21, 2022 at 5:12 am

    Thanks for saving me Marinus, this is exactly what I’ve been looking for! I have some feedback for you too – I installed plugin but ended up using your original code. With your updated code the horizontal images were distorted as they were compressed to same width as portrait images. I would also like to know if you are able to modify the original code to include height conditions for responsive versions? I hope you can help!
    Cheers, Karen

    Reply
    • Karen McKenzie says

      April 12, 2023 at 2:31 am

      Hi Marinus, fyi I figured out a super simple way to make your original code work for responsive formats & would like to share it in case it helps someone else with the same issue!

      I simply changed px to vh – obviously preceded by the percentage of viewing height required – I used 30:

      selector .swiper-slide img {
      height: 30vh;
      }

      Reply
  6. Fabiola says

    November 11, 2022 at 1:21 am

    I have downloaded and activated the plugin. Now what? how can i add it to my website? is there a specific widget i need to add (please name it).

    Reply
    • Marinus Klasen says

      November 18, 2022 at 4:18 pm

      Hi Fabiola, this plugin assumes you’re using the Media Carousel Widget as well, more info here: https://elementor.com/help/media-carousel-widget-pro/

      Reply
  7. Johannes says

    November 14, 2022 at 11:33 am

    Thanks for your plugin! It works, but there is kind of a “bug”.
    With the pure image carousel, the images are aligned to the left side of the slider.
    When using your plugin, the dynamic image width works as expected, but the images get cut off on the left side.
    It seems, that the slider slides always the same amount of pixels. It would be very useful, if the plugin had an option to slide always the corresponding width of the most-left-visible image.

    Reply
    • Marinus Klasen says

      November 18, 2022 at 4:17 pm

      hmmm – not sure if I fully understand the issue, can you share a link to your website via e-mail?

      Reply
  8. Francesco says

    February 4, 2023 at 3:30 pm

    Hello does this work without Elementor Pro?

    Reply
    • Marinus Klasen says

      February 6, 2023 at 11:07 am

      Quite sure it does!

      Reply
  9. Steve K says

    February 6, 2023 at 4:53 am

    Thank you Marinus for this awesome plugin! I was looking for something totally unrelated and stumbled across this – It helped me solve a problem I hadn’t started looking at. Love it when that happens.
    This will be used a lot and just wanted to say thank you for sharing it.

    Reply
  10. Jacqueline Cote says

    February 7, 2023 at 8:53 pm

    Thank you so much for this! I am building a dynamic site and need clients to be able to upload without worrying about aspect ratios! ๐Ÿ™‚

    I do have one question… it seems that there is space at the end of the carousel.. maybe because it’s calculating the width that would be there? Is there a way to get rid of that so that the carousel is seamless?

    Here’s a link to a very rough development site: http://wptesting1.flourishdesignstudio.com/member-directory-february/2/single-winery-profile/

    Reply
    • Marinus Klasen says

      February 13, 2023 at 11:43 am

      The link you shared results in a 404 – feel free to contact me by e-mail ๐Ÿ™‚

      Reply
      • Zala Kosnik says

        July 7, 2023 at 3:33 pm

        Hi! We have the same problem at our webpage at the top (https://leppa.si/portfolio-item/50-odtenkov-modre) – any idea what to do?
        Thank you so much!

        Reply
  11. Karen McKenzie says

    April 11, 2023 at 7:27 pm

    Hi Marinus this is great for desktop view

    selector .swiper-slide img {
    height: 400px;
    }

    but I would like to also control the height for responsive viewports – is this possible?

    Reply
  12. Luke Shenefield says

    April 21, 2023 at 9:55 pm

    Hi there, I was able to add this code to the regular Image Carousel, and it worked! – well, the images are the same height and not distorted. But when you click on the right or left arrow, they don’t move one image at a time. It takes a couple clicks to move through them. Thoughts?

    Reply
    • Marinus Klasen says

      May 8, 2023 at 8:25 am

      Hey Luke, I have not experienced this myself but happy to have a look, just send me an e-mail ๐Ÿ™‚

      Reply
  13. evan says

    May 7, 2023 at 11:09 am

    Hi Marinus, is this work for wp bakery? im using uncode theme with wp bakery included

    Reply
    • Marinus Klasen says

      May 8, 2023 at 8:25 am

      Does WP Bakery work together with Elementor? If so, then this should work as well ๐Ÿ™‚

      Reply
  14. Rachel Morris says

    June 16, 2023 at 2:40 pm

    so helpful thank you!!!

    Reply
  15. Priya S says

    July 13, 2023 at 7:23 am

    Works well in desktop. But white space issue coming after last slide in mobile.

    Reply
  16. Riza says

    August 11, 2023 at 3:32 pm

    Sangat membantu saya dalam mengatur ukuran gambar pada carausell, terimakasih banyak.

    Reply
  17. Eme says

    September 4, 2023 at 5:33 am

    Hi Marinus,
    thanks for your work!

    There is an annoying bug, maybe you have the solution.

    I’m using the widget “Image Carousel” of Elementor Pro.

    The carousel works fine but not the lightbox. It’s a bit random, sometimes you can click the images and open the lightbox, sometimes not. Especially when you visit the page from mobile.

    Any advice? Thanks

    Reply
  18. AbdullAh Shahid says

    September 8, 2023 at 12:33 pm

    Video Show is Small height how to fix it

    Reply
  19. Ema says

    September 10, 2023 at 1:47 pm

    Hi Marinus, thanks for your work!

    Unfortunately, I’m experiencing an annoying issue.

    I have installed the plugin, I’m using the “Image Carousel” widget:

    CSS- class auto-width

    plus the code:

    selector .swiper-slide img {
    height: 400px;
    }

    But there is a problem with the lightbox of every single pic. Sometimes work, sometimes not.
    Especially in the mobile view of the website.

    I’m using Elementor Pro.

    Any suggestion? Thanks!

    Reply
  20. Ema says

    September 10, 2023 at 11:52 pm

    Hi Marinus, thanks for your work!

    The images look with all the same high but the lightboxes does not work properly. Especially from mobile.

    I’m using Elementor Pro.

    Any suggestion? Thanks!

    Reply
  21. Alfonso says

    September 13, 2023 at 11:07 am

    Not working on Firefox!

    Reply
    • Josselyn says

      June 28, 2024 at 3:22 pm

      Hi,i’ve got a problem too on firefox with white space.
      Have you manage this problem ?

      Reply
  22. Tracy says

    October 29, 2023 at 11:57 pm

    Thank so much for this piece of code! This had been troubling me for ages!! Was a workaround ever found for the extra space at the end of the gallery in carousel?

    Reply
  23. Jacqueline Cote says

    July 8, 2024 at 7:08 pm

    Hi! I’m trying to use this on various pages on a website redesign of https://mauromarinelli.com/redesign/

    There seems to be some blank space at the end of the carousel. ca you take a look and let me know what I’m doing wrong?

    Also, the proportions are off on mobile on some interior pages. https://mauromarinelli.com/redesign/?page_id=635 Do I need to change the CSS class on each page that I use the code on?

    Reply
    • Leslie says

      August 15, 2024 at 5:00 am

      Hi!

      Did you manage to work around the blank space issue at the end of the carousel?

      Reply
  24. Niko Ageenko says

    September 9, 2024 at 9:39 pm

    It seems this plugin code works only on PC layout but does not on mobile and tablet. Any solution?

    Reply
  25. Bertram says

    April 16, 2025 at 4:39 pm

    A thousand thanks for that! Still working in 2025…

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get in touch

Contact me using the details below

Marinus Klasen

Wilhelmina van Pruisenweg 35, 2595 AN Den Haag

marinus@mklasen.com
twitter.com/marinusklasen
linkedin.com/in/marinusklasen

  • GitHub
  • LinkedIn
  • Twitter

Have you read?

  • Elementor Widget UsageMarch 27, 2025
  • Programmatically showing popups with ElementorMarch 25, 2025
  • The Elementor sanitize_settings errorSeptember 12, 2024
  • Announcing.. Wooping Shop Health!June 13, 2024
  • Swiper setup when using wp-scriptsMarch 14, 2024

Copyright © 2025 ยท Marinus Klasen | Webdesign by Team Rood