Clever Geek Handbook

Owl Carousel 2 - caption div (img title & alt tags)

I am looking for a way to display tags img

and alt

in div

( .image-caption

).

This is my code:

    owl.on('changed.owl.carousel', function(event) {

        var comment = $(this).find('img').attr('alt');
        var title = $(this).find('img').attr('title');
        if(comment) $('#desktop .image-caption').html('<h4>'+title+'</h4><p>'+comment+'</p>');

    })

Any ideas? Thank!

+3


source to share


2 answers


You can use event translated.owl.carousel

for this

Here is a working Fiddle

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


UPDATE:

Slightly improved code and added functionality to update image title on carousel load.

FIDDLE

+2


source


it works:

var comment = $(this).find('.active').find('img').attr('alt');
var title = $(this).find('.active').find('img').attr('title');
if(comment) $('.image-caption').html('<h4>'+title+'</h4><p>'+comment+'</p>');


try it: https://jsfiddle.net/wx0ovpzh/49/

0


source






More articles:


All Articles