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.
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?!
My client and I are very happy with your help Marinus! This is exactly what we were looking for.
Thank you for sharing your solution, that was exactly what i was looking for to access the Elementor swiper params.
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.
Yes, but you do have to add a bit of CSS for that, see the top of the post for a code snippet!
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!
Hi Martina,
Thanks for letting me know! Could you let me know what doesn’t work in the plugin?
/ Marinus
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
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).
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/
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.
hmmm – not sure if I fully understand the issue, can you share a link to your website via e-mail?