Owl Carousel 2 – 字幕div（img title＆alt标签）

我正在寻找一种在div （ .image-caption ）中显示img title和alt标签的方法。

到目前为止这是我的代码：

  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('
'+title+'
'+comment+'
'); }) 

有任何想法吗？ 谢谢！

Answer 1

您可以使用translated.owl.carousel事件

这是一个工作小提琴

 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('
'+title+'
'+comment+'
'); }); 

更新：

稍微改进的代码和添加function，以更新轮播加载上的图像标题。

小提琴

Answer 2

这工作：

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

尝试一下： https ： //jsfiddle.net/wx0ovpzh/49/