Owl Carousel 2 - autoHeight (multiple items)
At the moment the Owl Carousel autoHeight works only with 1 item on screen. Their plan is to calculate all visible items and change height according to highest item.
I work around this problem by calling the .active classes on the visible items, and give the invisible items a small height. Is there already a more elegant solution?
HTML
<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.carousel.js"></script>
<div id="bizamajig-gallery-1" class="owl-carousel">
<div class="item">
<img src="http://via.placeholder.com/350x150?text=1">
</div>
<div class="item">
<img id="image-2" src="http://via.placeholder.com/350x150?text=2">
</div>
<div class="item">
<img src="http://via.placeholder.com/350x150?text=3">
</div>
<div class="item">
<img src="http://via.placeholder.com/350x150?text=4">
</div>
</div>
<a class="prev">prev</a>
<a class="next">next</a>
CSS
/* START SLIDER - OWL - 2 */
/*
* Owl Carousel - Animate Plugin
*/
.owl-carousel .animated {
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.owl-carousel .owl-animated-in {
z-index: 0;
}
.owl-carousel .owl-animated-out {
z-index: 1;
}
.owl-carousel .fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/*
* Owl Carousel - Auto Height Plugin
*/
.owl-height {
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out;
}
/*
* Core Owl Carousel CSS File
*/
.owl-carousel {
display: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
/* position relative and z-index fix webkit rendering fonts issue */
position: relative;
z-index: 1;
}
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
}
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
/* fix for flashing background */
-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.owl-carousel.owl-loaded {
display: block;
}
.owl-carousel.owl-loading {
opacity: 0;
display: block;
}
.owl-carousel.owl-hidden {
opacity: 0;
}
.owl-carousel .owl-refresh .owl-item {
display:...
JavaScript
var bizamajig__carousel_lightbox__image_update = function( target_carousel ) {
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// Vertically center our cropped images when called by owlCarousel() callbacks, when initialized or
// when responsive switching occurs via container/window resizing.
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// Determine item with lowest height value. We start by getting the height of the first item in this carousel, and comparing each one.
//
// var target_carousel = '#bizamajig-gallery-1';
var minimum_height = 0,
$first_item = $( '.owl-item', target_carousel ).eq(0);
/*DEBUG CAROUSEL LIGHTBOX*/console.log( 'DEBUG - CAROUSEL LIGHTBOX - $first_item = ', $first_item );
minimum_height = parseInt( $first_item.css( 'height' ) );
/*DEBUG CAROUSEL LIGHTBOX*/console.log( 'DEBUG - CAROUSEL LIGHTBOX - SET FIRST ITEM HEIGHT = ', minimum_height, $first_item );
$( '.owl-item', target_carousel ).each( function () {
var $element = $(this);
element_height = parseInt( $element.css( 'height' ) );
/*DEBUG CAROUSEL LIGHTBOX*/console.log( 'DEBUG - CAROUSEL LIGHTBOX - SET NEXT ITEM HEIGHT = ', element_height, $element );
minimum_height = ( minimum_height <= element_height ? minimum_height : element_height );
});
/*
var myNodeList = document.querySelectorAll( target_carousel + ' .owl-item' ); // Like, '#bizamajig-gallery-1 .owl-item'
bizamajig__for_each( myNodeList, function ( index, value ) {
// index is from our bizamajig__for_each for loop, and value is our object referenced by this iteration
// console.log( index, value ); // passes index + value back!
var $element =...