Multi tool use

Centered owl-carousel where each image has the same hight and keeps its aspect ratio

Is there an approach to to create a centered owl-carousel where each image has the same height without losing its aspect ratio?

owl-carousel

I tried to calculate the image sizes with JS/jQuery but then the calculation of the owl-carousel gets messed up. Same result with CSS s. example (jsfiddle):

JS/jQuery

owl-carousel

CSS

$(document).ready(function () {
$('.loop').owlCarousel({
center: true,
items: 3,
loop: true,
margin: 20
});
});

.owl-carousel .owl-stage {
height: 150px;
}

.owl-carousel .owl-item {
height: 100%;
}

.owl-carousel .owl-item .item {
height: 100%;
}

.owl-carousel .owl-item img {
height: 100% !important;
width: auto !important;
margin: 0 auto;
}

<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="loop owl-carousel owl-theme">
<div class="item"><img src="http://via.placeholder.com/320x460/ff0000/000000?text=IMG 01" /></div>
<div class="item"><img src="http://via.placeholder.com/460x320/00ffff/000000?text=IMG 02" /></div>
<div class="item"><img src="http://via.placeholder.com/100x80/00ff00/000000?text=IMG 03" /></div>
<div class="item"><img src="http://via.placeholder.com/50x100/ff00ff/000000?text=IMG 04" /></div>
<div class="item"><img src="http://via.placeholder.com/70x80/ffff00/000000?text=IMG 05" /></div>
</div>

The current div/image should be

div

image

If the element is bigger wider then the viewport, well than it gets cutted.

Is there even a method to achieve that with the owl-carousel?

owl-carousel

I checked some other similar questions on SO but as far I can see they have all different focus:

Image slider: maintaining equal height for all images while keeping slider responsive

// overrides the aspect ratio


Owl Carousel align each item vertically when their height not equal

// not the same height of each item*


EDIT: I just double check the auto-height demo...

To enable use autoHeight: true. At the moment works only with 1 item on screen. The plan is to calculate all visible items and change height according to heighest item.

autoHeight: true

Seems like there is not such an options yet.

autoWidth: true

autoWidth: true

autoWidth

autoHeight

autoWidth

autoHeight

1 Answer
1

If all of your images have the same height - try adding autoWidth: true:

$(document).ready(function () {
$('.owl-carousel').owlCarousel({
center: true,
margin:10,
loop:true,
autoWidth:true,
items:4
})
});

.owl-carousel .owl-stage {
height: 200px;
}

.owl-carousel .owl-item {
height: 100%;
}

.owl-carousel .owl-item .item {
height: 100%;
}

.owl-carousel .owl-item img {
height: 100% !important;
width: auto !important;
margin: 0 auto;
}

<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="loop owl-carousel owl-theme">
<div class="item"><img src="http://via.placeholder.com/320x460/ff0000/000000?text=IMG 01" /></div>
<div class="item"><img src="http://via.placeholder.com/460x320/00ffff/000000?text=IMG 02" /></div>
<div class="item"><img src="http://via.placeholder.com/100x80/00ff00/000000?text=IMG 03" /></div>
<div class="item"><img src="http://via.placeholder.com/50x100/ff00ff/000000?text=IMG 04" /></div>
<div class="item"><img src="http://via.placeholder.com/70x80/ffff00/000000?text=IMG 05" /></div>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.