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.