Jump to content

Trouble Sizing/Re-sizing Images in Owl Carousel


Recommended Posts


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:
(it's the slider right above the footer with the logo's)

Any and all help would be greatly appreciated!

Thanks in advance!

Link to comment
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.

Link to comment
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.

Link to comment
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
  • Create New...