Owl 2 - Aspect Ratio Fix - 5

by bizamajig

HTML

<script>
"function"!==typeof Object.create&&(Object.create=function(f){function g(){}g.prototype=f;return new g});
(function(f,g,k){var l={init:function(a,b){this.$elem=f(b);this.options=f.extend({},f.fn.owlCarousel.options,this.$elem.data(),a);this.userOptions=a;this.loadContent()},loadContent:function(){function a(a){var d,e="";if("function"===typeof b.options.jsonSuccess)b.options.jsonSuccess.apply(this,[a]);else{for(d in a.owl)a.owl.hasOwnProperty(d)&&(e+=a.owl[d].item);b.$elem.html(e)}b.logIn()}var b=this,e;"function"===typeof b.options.beforeInit&&b.options.beforeInit.apply(this,[b.$elem]);"string"===typeof b.options.jsonPath?
(e=b.options.jsonPath,f.getJSON(e,a)):b.logIn()},logIn:function(){this.$elem.data("owl-originalStyles",this.$elem.attr("style"));this.$elem.data("owl-originalClasses",this.$elem.attr("class"));this.$elem.css({opacity:0});this.orignalItems=this.options.items;this.checkBrowser();this.wrapperWidth=0;this.checkVisible=null;this.setVars()},setVars:function(){if(0===this.$elem.children().length)return!1;this.baseClass();this.eventTypes();this.$userItems=this.$elem.children();this.itemsAmount=this.$userItems.length;
this.wrapItems();this.$owlItems=this.$elem.find(".owl-item");this.$owlWrapper=this.$elem.find(".owl-wrapper");this.playDirection="next";this.prevItem=0;this.prevArr=[0];this.currentItem=0;this.customEvents();this.onStartup()},onStartup:function(){this.updateItems();this.calculateAll();this.buildControls();this.updateControls();this.response();this.moveEvents();this.stopOnHover();this.owlStatus();!1!==this.options.transitionStyle&&this.transitionTypes(this.options.transitionStyle);!0===this.options.autoPlay&&
(this.options.autoPlay=5E3);this.play();this.$elem.find(".owl-wrapper").css("display","block");this.$elem.is(":visible")?this.$elem.css("opacity",1):this.watchVisibility();this.onstartup=!1;this.eachMoveUpdate();"function"===typeof...

CSS

/* SEE: http://jsfiddle.net/bizamajig/2qv2dkh6/22/ */
/* 
 * 	Core Owl Carousel CSS File
 *	v1.3.3
 */

/* clearfix */
.owl-carousel .owl-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
/* display none until init */
.owl-carousel{
	display: none;
	position: relative;
	width: 100%;
	-ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
	display: none;
	position: relative;
	-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
	overflow: hidden;
	position: relative;
	width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
	-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;
}
	
.owl-carousel .owl-item{
	float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
	cursor: pointer;
}
.owl-controls {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing { 
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	-ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}
/*
* 	Owl Carousel Owl Demo Theme 
*	v1.3.3
*/

.owl-theme .owl-controls{
	margin-top: 10px;
	text-align: center;
}

/* Styling Next and Prev buttons */

.owl-theme .owl-controls .owl-buttons div{
	color: #FFF;
	display: inline-block;
	zoom: 1;
	*display: inline;/*IE7 life-saver */
	margin: 5px;
	padding: 3px 10px;
	font-size: 12px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	background: #869791;
	filter: Alpha(Opacity=50);/*IE7...

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 (...