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
Schakelen
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
Cerlin Boss
source
to share
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
AiApaec
source
to share