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

【问题标题】：Owl Carousel 2 - caption div (img title & alt tags)Owl Carousel 2 - 标题 div（img 标题和 alt 标签）
【发布时间】：2015-04-20 15:18:08
【问题描述】：

我正在寻找一种在div (.image-caption) 中显示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>');

    })

有什么想法吗？谢谢！

【问题讨论】：

这不行吗？你面临的问题是什么？
由于某种原因，.image-caption 不会检索活动图像附带的 alt 和 title 标签。 .image-caption 位于 Owl Carousel 之外。
你能在小提琴中重现问题并分享吗？
当然，在这里找到它：jsfiddle.net/Schakelen/wx0ovpzh/45
请阅读标签说明；这个问题与 Web Ontology Language OWL 无关。 owl 的标签描述说“Web 本体语言 (OWL) 是用于创建模式（本体）的词汇表，即定义类、属性以及它们之间的关系。”

标签： javascript jquery carousel owl-carousel owl-carousel-2

【解决方案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

【讨论】：

感谢赛林！效果很好！我发布了另一个关于 Owl Carousel 的 autoHeight 和多个项目的问题：stackoverflow.com/questions/29769409/…
您改进的小提琴中有错字。在 CSS 文件中，它必须是 width: 100%; 而不是 widht ;-)

【解决方案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/

【讨论】：

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