Owl Carousel 2 - 字幕div（img title& alt标签） [英] Owl Carousel 2 - caption div (img title & alt tags)

问题描述

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

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

    })      

任何想法？谢谢！

推荐答案

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

这是一个有用的小提琴 / p>

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

更新：

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

Slightly improved code and added functionality to update image caption on carousel load.

FIDDLE

这篇关于Owl Carousel 2 - 字幕div（img title& alt标签）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！