Owlcarousel Width

Developers Frontend
1

Has anyone figured out how to make owlCarousel from the banners addon not be 100% width? The way it is now the banners stretch to a huge height when the browser window is a decent size; I'd prefer to make the carousel ~50% width and center it, but I haven't figured out a way to do it.



Thanks

2

I was able to achieve this by putting it inside of a div wrapper with a width of 50% and auto margins, then used media queries to bump it back up to 100% for smaller screens.

3

I finally found something useful. In the File Editor, under /addons/banners, open the styles.css file. In the .banners img code, I changed width to auto, and set a max height in ###px. This displayed my banners with the correct aspect ratio, and the smaller height I set. Note that if you do it here, it will handle all banner carousels the same. I took it one step further, and duplicated the block with a different class name before “img” so I can set up different carousels with the user custom class settings by simply defining it with that name. Save the file, clear your cache, and it works!





Sent from my iPad using Tapatalk

4

No idea if the OP ever got it solved, but I've been wrestling with the carousel for banners stretching my images as well, and have been hunting for a good simple solution. So, if anyone else ends up here, I hope this helps.



I finally managed to fix this directly. From the Admin panel, go to Design/File Editor. From there, you're navigating to css/addons/banners/styles.css



You will see the following code:


.banners img {
display: block;
width: 100%;
height: auto;
}




You can change the height attribute directly here. For example, setting it to 200px will set the height of banners in the carousel to 200 pixels. It will, however then stretch the widths.



So, I set width to auto, and now the aspect ratio is maintained, with the consistent height I want.



The catch is that if you set it within the .banners img block, it will affect ALL of your banner carousels.



So instead, I duplicated it, with a custom class name replacing the word banners. Then I made my height and width changes and saved the file.



Next, I went to my banner block, added my content, and set the User-defined CSS class to the name I'd created. This allows you to have multiple carousels with different settings around your store.



Save the block, and finally, clear the cache, and you're all set!