JSFiddle - React, Tailwind, and code Playground

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-example" class="owl-carousel">
    <div>
        <div class="item">
            <img src="http://lorempixel.com/234/285/sports/5/" />
        </div>
    </div>
    <div>
        <div class="item">
            <img src="http://lorempixel.com/234/500/sports/6/" />
        </div>
    </div>
    <div>
        <div class="item">
            <img src="http://lorempixel.com/234/500/sports/7/" />
        </div>
    </div>
    <div>
        <div class="item">
            <img src="http://lorempixel.com/234/285/sports/8/" />
        </div>
    </div>
</div>

CSS

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

.owl-carousel .item {
    margin:0px;
}

JavaScript

$(document).ready(function () {

    $("#owl-example").owlCarousel({
        afterUpdate: function () {
            updateSize();
        },
        afterInit:function(){
            updateSize();
        }
    });
    function updateSize(){
        var minHeight=parseInt($('.owl-item').eq(0).css('height'));
        $('.owl-item').each(function () {
            var thisHeight = parseInt($(this).css('height'));
            minHeight=(minHeight<=thisHeight?minHeight:thisHeight);
        });
        $('.owl-wrapper-outer').css('height',minHeight+'px');
    }
});