Justified auto width in Media Carousel Widget in Elementor

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.

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?!