Jump to content
m_hutchins

Trouble Sizing/Re-sizing Images in Owl Carousel

Recommended Posts

Hello,

I seem to be having an issue getting the images in an Owl Carousel to size correctly. I think think the width of the images are being calculated in the JS, but I'm not 100%, JS is definitely not my strong suit.

Maybe there's a way to override it with CSS, but I'm not having much luck.

Here's a link to the site:
https://www.eengineering.com/
(it's the slider right above the footer with the logo's)

Any and all help would be greatly appreciated!

Thanks in advance!

Share this post


Link to post
Share on other sites

It looks like the images are sized correctly, what should that look like?

Share this post


Link to post
Share on other sites

Well the actual image sizes are 436 px (w)x 140 px (h). Any size image I put in to the carousel, they get resized to 220px wide. 

I see this style added in the inspector:
    <div class="owl-item cloned" style="width: 220px; margin-right: 20px;">

That inline style isn't hard coded on the page(s).

I seem to almost always struggle controlling and altering the image sizes on these scrollers/carousels.

Hope that helps.

Share this post


Link to post
Share on other sites

It looks like it calculates the width based on how many items are to be shown.  Since you're having it show 5 items, it adjusts the width of the images as necessary to fit.

Share this post


Link to post
Share on other sites

You change the overall width of the container where the slideshow is, and then adjust the number of items to show.  You need to reduce it from 5 down to a smaller value if you want the images to be larger.  Try showing 3 at a time.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×