Owl Carousel 2 bug report

by bizamajig

HTML

<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.carousel.js"></script>
<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.lazyload.js"></script>
<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.autoheight.js"></script>
<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.video.js"></script>
<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.animate.js"></script>
<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.autoplay.js"></script>
<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.navigation.js"></script>
<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.hash.js"></script>
<link rel="stylesheet" href="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.carousel.css">
<link rel="stylesheet" href="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.lazyload.css">
<link rel="stylesheet" href="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.animate.css">
<link rel="stylesheet" href="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.autoheight.css">
<!-- Follow these instructions, please! -->

<h1>triggering <strong>refresh.owl.carousel</strong> does not work</h1>

<p>A way is needed to trigger an internal resize event so that owl carousels content adapts to a change of its container. See issue #32 on GitHub <a href="https://github.com/OwlFonk/OwlCarousel2/issues/32#issuecomment-48904516">issue #32</a></p>
<p>Thanks!</p>

<div class="owl-carousel">
    
    <div>
        <img src="http://lorempixel.com/400/200/"/>
    </div>
    
    <div>
        <img src="http://lorempixel.com/400/200/"/>
    </div>
    
    <div>
         <img src="http://lorempixel.com/400/200/"/>
    </div>
    
</div>

<button class="maximize">maximize</button>

CSS

.owl-carousel{
    width:100px;
    height:100px;
    background-color: rgb(200,200,200);
}


.owl-carousel.maximized{
    width: 400px;
    height:400px;
}

JavaScript

var $owl = $('.owl-carousel').owlCarousel({
    items: 1,
    loop:true
    //,responsive: true /* does not matter, right? */
});


$('.maximize').on('click', function(){
    
    $owl.addClass('maximized');
    
    // does not seem to do anything
    $owl.trigger('refresh.owl.carousel');
    
    
    /* hacky solution so far:
    
    if (document.createEvent) {
        window.dispatchEvent( new Event('resize') );
    }else{
        document.body.fireEvent('onresize');
    }
    
    */ 
});