Owl Carousel 2 - 标题div（img标题和alt标签）

Question

我正在寻找一种方法来在一个名为.image-caption的 div中显示img标题和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('<h4>'+title+'</h4><p>'+comment+'</p>');

    })      

有什么想法吗？谢谢！

- Schakelen

---

这个不起作用吗？你遇到了什么问题？ - Cerlin

由于某种原因，.image-caption无法检索与活动图像一起使用的alt和title标签。 .image-caption放置在Owl Carousel之外。 - Schakelen

你能在 Fiddle 中重现这个问题并分享吗？ - Cerlin

当然，你可以在这里找到它：https://jsfiddle.net/Schakelen/wx0ovpzh/45/ - Schakelen

请阅读标签描述；此问题与OWL（Web本体语言）无关。[tag:owl]的标签描述为“Web本体语言（OWL）是用于创建模式（本体论）的词汇表，即类、属性及其之间关系的定义。” - Joshua Taylor

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

- Cerlin

---

谢谢Cerlin！非常好用！我已经发布了另一个关于Owl Carousel的autoHeight和多个items的问题：https://dev59.com/kYnda4cB1Zd3GeqPF_KI - Schakelen

你的修改后的代码有一个拼写错误。在CSS文件中，应该是width: 100%;而不是widht;-) - n2o

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/

- AiApaec

---

谢谢！但是这种方法仍然不准确。当我更改幻灯片时，.image-caption将从上一张图片中检索其数据。 - Schakelen