Sabique A Khan Sabique A Khan - 4 months ago 533
jQuery Question

How to add captions for images in owl carousel

I'm using own carousel, so to add caption I followed this question on stack overflow but it didn't work for me. Then I checked using inspect element and found that their is no 'active' class on my carousel current image. So I added script to do so. In the end my script look like this

$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
items: 1,
afterAction: function(el) {
//remove class active
this
.$owlItems
.removeClass('active')

//add class active
this
.$owlItems
.eq(this.currentItem)
.addClass('active')
},

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>');
});
});


The script is not working properly.

Answer

In this solution i am using HTML figcaption element that represents a caption or a legend associated with a HTML figure.

Also i have added all the needed logic at OWL Carousel afterMove after move callback:

$('.owl-carousel').owlCarousel({
    loop: true,
    items: 1,
    navigation: true,
    pagination: true,
    lazyLoad: true,
    singleItem: true,
    afterMove: function(elem) {
        var current = this.currentItem;
        var currentImg = elem.find('.owl-item').eq(current).find('img');

        $('figure')
            .find('img')
            .attr({
                'src': currentImg.attr('src'),
                'alt': currentImg.attr('alt'),
                'title': currentImg.attr('title')
            });
        $('#figcaption').text(currentImg.attr('title'));
    }
});
.owl-carousel .owl-item img {
    display: block;
    width:80%;
    height:100px;
}
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" />

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

<figure id="currentImageWithCaption">
    <img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Title 1" width="50" height="30">
    <figcaption id="figcaption">Title 1</figcaption>
</figure>

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