javascript - Owl Carousel 2 - 标题 div(img 标题和 alt 标签)

Question

我正在寻找一种在 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