Owl Carousel - Caption

I'm looking for a way to display the img title & alt tags in a div (.image-caption).

HTML

<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.theme.default.css">
<link rel="stylesheet" href="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.carousel.css">
<div class="image-caption">Replace this Caption</div>

<a class="prev">prev</a>
<a class="next">next</a>

<div class="owl-carousel">
    <div class="item">
        <img src="http://malsup.github.io/images/p1.jpg" title="Title 1" alt="Alt 1" />
    </div>
    <div class="item">
        <img src="http://malsup.github.io/images/p2.jpg" title="Title 2" alt="Alt 2" />
    </div>
    <div class="item">
        <img src="http://malsup.github.io/images/p3.jpg" title="Title 3" alt="Alt 3" />
    </div>
    <div class="item">
        <img src="http://malsup.github.io/images/p4.jpg" title="Title 4" alt="Alt 4" />
    </div>
</div>

CSS

.owl-carousel .owl-item {
    background:#CCC;
}
.owl-carousel .owl-item img {
    display:block;
    width:100%;
    height:200px;
}

JavaScript

$('.owl-carousel').owlCarousel({
    loop: true,
    items: 1,
    onInitialized : function(){
        var activeImg = $('.owl-carousel').find('.active').find('img');
        var comment = activeImg.attr('alt');
        var title = activeImg.attr('title');
        if(comment) $('.image-caption').html('<h4>'+title+'</h4><p>'+comment+'</p>');
    }
});

owl = $('.owl-carousel').owlCarousel();
$(".prev").click(function () {
    owl.trigger('prev.owl.carousel');
});
$(".next").click(function () {
    owl.trigger('next.owl.carousel');
});

owl.on('translated.owl.carousel', function(event) {
    var activeImg = $(this).find('.active').find('img');
    var comment = activeImg.attr('alt');
        var title = activeImg.attr('title');
    if(comment) $('.image-caption').html('<h4>'+title+'</h4><p>'+comment+'</p>');
    
});