Marinus Klasen

Marinus Klasen

  • Development
  • Consultancy
  • Developer Resources
  • Blog
  • Contact

May 18, 2022

Justified auto width 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

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

Leave a Reply Cancel reply

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

Ready to take action?

I'm looking forward to discuss your projects and goals!
Feel free to reach out using the contact details below.

Marinus Klasen

[email protected]
twitter.com/marinusklasen
linkedin.com/in/marinusklasen

  • GitHub
  • LinkedIn
  • Twitter

Have you read?

  • Find the largest tables in your databaseAugust 9, 2022
  • Dump / pretty print a JSON object in ReactJuly 28, 2022
  • Updating custom post meta via the WordPress REST APIJuly 24, 2022
  • Updating a post in WordPress using FetchJuly 23, 2022
  • Get the current taxonomy ID in WordPressJuly 20, 2022

Copyright © 2022 · Marinus Klasen | Webdesign by Team Rood