Owl 2 - Aspect Ratio Fix - 5

by bizamajig

HTML

<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<div id="owl-carousel-7" class="owl-carousel">
	<div class="item">
      <a title="" rel="prettyPhoto[collection_50282]" href="http://www.galleryatstudiob.com/content/34931/1033TT Big Creek Fall Foliage NF (300 x 239).jpg" class="materialized">
        <img src="http://www.galleryatstudiob.com/content/34931/1033TT Big Creek Fall Foliage NF (300 x 239).jpg" />
      </a>
    </div>
    <div class="item">
      <a title="" rel="prettyPhoto[collection_50282]" href="http://www.galleryatstudiob.com/content/34931/1033TT Big Creek Fall Foliage NF (300 x 239).jpg" class="materialized">
            <img src="http://www.galleryatstudiob.com/content/34931/August Afternoon 16 x 16.jpg" />
      </a>
    </div>
    <div class="item">
      <a title="" rel="prettyPhoto[collection_50282]" href="http://www.galleryatstudiob.com/content/34931/1033TT Big Creek Fall Foliage NF (300 x 239).jpg" class="materialized">
        <img src="http://lorempixel.com/234/285/sports/5/" />
      </a>
    </div>
    <div class="item">
      <a title="" rel="prettyPhoto[collection_50282]" href="http://www.galleryatstudiob.com/content/34931/1033TT Big Creek Fall Foliage NF (300 x 239).jpg" class="materialized">
        <img src="http://lorempixel.com/234/500/sports/6/" />
      </a>
    </div>
    <div class="item">
      <a title="" rel="prettyPhoto[collection_50282]" href="http://www.galleryatstudiob.com/content/34931/1033TT Big Creek Fall Foliage NF (300 x 239).jpg" class="materialized">
        <img src="http://lorempixel.com/234/500/sports/7/" />
      </a>
    </div>
</div>

CSS

.owl-carousel .owl-item img {
    height:auto;
    width:100%;
    display: block;
}
.owl-carousel .item {
    margin:0px;
}

JavaScript

var target_carousel = '#owl-carousel-7';
    $( target_carousel ).owlCarousel({
        animateIn:				true,
        animateOut:				true,
        autoplay:				true,
        autoplayTimeout:		5000,
        autoplayHoverPause:		true,

        margin:					0,
        
        itemsScaleUp: 			true,
        items: 					10, //10 items above 1000px browser width
        itemsDesktop: 			[1000,5], //5 items between 1000px and 901px
        itemsDesktopSmall: 		[900,3], // betweem 900px and 601px
        itemsTablet: 			[600,2], //2 items between 600 and 0
        itemsMobile: 			false, // itemsMobile disabled - inherit from itemsTablet option
        afterUpdate: function () {
            updateSize2( target_carousel );
        },
        afterInit: function(){
            updateSize2( target_carousel );
        }
    });
    function updateSize2( target_carousel ){
//        Determine item with lowest height value
        var minimum_height = parseInt( $( '.owl-item', target_carousel ).eq(0).css( 'height' ) );
        $( '.owl-item', target_carousel ).each( function () {
            var $element = $(this);
            var element_height = parseInt( $element.css( 'height' ) );
            minimum_height = ( minimum_height <= element_height ? minimum_height : element_height );
        });
//console.log( 'Min Height = ' + minimum_height );
        $( '.owl-wrapper-outer', target_carousel ).css( 'height', minimum_height + 'px' );

        /*show the bottom part of the cropped images*/
        $( '.owl-item', target_carousel ).each( function(){
            var $element = $(this);
            var $adjust_element = $element.find( 'img' );
            var element_height = parseInt( $adjust_element.css( 'height' ) );
            var leftover_height = ( ( element_height - minimum_height ) | 0 );
            var margin_adjustment = ( leftover_height / 2 ) | 0;
//console.log( 'element_height = ' + element_height );
//            Adjust item with height overage
            if (...