Schakelen Schakelen - 24 days ago 18
Javascript Question

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

I'm looking for a way to display the

img
title &
alt
tags in a
div
(
.image-caption
).

This is my code so far:

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? Thanks!

Answer

You can use translated.owl.carousel event for that

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 caption on carousel load.

FIDDLE

Comments