m_hutchins Posted May 14, 2018 Share Posted May 14, 2018 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! Link to comment Share on other sites More sharing options...
justsomeguy Posted May 14, 2018 Share Posted May 14, 2018 It looks like the images are sized correctly, what should that look like? Link to comment Share on other sites More sharing options...
m_hutchins Posted May 14, 2018 Author Share Posted May 14, 2018 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 More sharing options...
justsomeguy Posted May 14, 2018 Share Posted May 14, 2018 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. Link to comment Share on other sites More sharing options...
m_hutchins Posted May 17, 2018 Author Share Posted May 17, 2018 That's what I was kind of figuring, I just can't seem to figure out how to adjust the calculation(s)... Link to comment Share on other sites More sharing options...
justsomeguy Posted May 17, 2018 Share Posted May 17, 2018 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now