Not showing proper image width

I also have the following to force it to the correct height because otherwise, it shows correct width but varying heights (which is weird because they all have the same height in the images)

.owl-carousel .owl-item img{
height:100px !important
}

I think it is something to do with .owl-stage having a set width (pushing to the second line) but changing the width to (auto !important) makes the slider disappear

Whilst Owl Carousel (the engine on which I’ve built my plugin) does support variable-width slides (see: https://owlcarousel2.github.io/OwlCarousel2/demos/autowidth.html), I built my plugin with an emphasis on responsiveness.

So if you define a SA slider to show 3 slides on desktop, 2 on tablet & 1 one on mobiles, on desktop each slide is calculated to be 33.33% of the available width, and there is JavaScript to maintain this ratio above a certain window pixel resolution (even for resize events that occur above this resolution). The same is true for tablet & mobile.

So unfortunately this new ‘Auto Width’ (introduced in Owl Carousel 2.0) feature is not catered for in Slide Anything – but its something I may look at adding in a future release. Not sure how I would achieve this as a lot of the code is tied into the inputs from the ‘Item Displayed’ box within the slider settings.

Hey @simonpedge

Thanks for the reply, would you have an idea how I could set it up to achieve the following:

I have around 100 supplier logos I want on a looping slider and I want them all to be the same height so it is a nice uniform looking bar on the bottom of the page. I resized them all so they would be varying widths but a set 100px high. When I upload them into the plugin they display at varying heights in the slider.

Thanks for any advice!

Hi, I just had a look at your site, and it looks like you have managed to get your logo slider working the way you want – impressive. How did you manage to do it? Could you please list your code changes, so others may benefit from your hard work, and then I can look at trying to add this as a new SA feature.

Hey @simonpedge,

Haha, it is definitely not working the way I want, I force bumped everything in place with CSS but there is still a second line that images are getting pushed to. If you wait long enough on the slides at one point it completely changes position (I imagine reverting to the beginning) so it is not an infinite loop anymore. When completed there will be around 100 slides so I am hoping that it is something that is just rarely noticed by users (since you would end up having to sit looking at it for some time to see this half-second glitch) Not a great solution but it’ll work for now! Anyways the code I used to bump everything into place was:

.owl-stage
{
transition-timing-function: linear!important;
}

.owl-carousel .owl-stage-outer{
overflow:visible !important;
}

.owl-stage{
background-color:white;
max-height:100px;
overflow-x:hidden;
overflow-y:hidden
}

.owl-carousel .owl-item img{
height:100px !important;
padding:10px;
display:flex;
}

.sa_owl_theme .owl-dots{
position:fixed !important
}

.owl-item{
width:auto !important;
}