Question

我正在寻找一种方式来显示img标题＆amp; alt（div）中的.image-caption个标记。

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

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

    })

有什么想法吗？谢谢！

Answer 1

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

这是一个有效的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>');
});

<强>更新

稍微改进了代码并增加了更新轮播加载图片标题的功能。

FIDDLE

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('<h4>'+title+'</h4><p>'+comment+'</p>');

试一试：https://jsfiddle.net/wx0ovpzh/49/

Owl Carousel 2 - 字幕div（img title＆amp; alt标签）

2 个答案: