Owl Carousel 2 – 获取当前幻灯片的src

我有以下代码块。 我要做的就是在幻灯片放映中获取当前图像的src。 它没有工作，尽管它改变了幻灯片，但控制台中根本没有出现任何内容。

HTML：

jQuery的：

 var owl = $(".owl-carousel"); owl.owlCarousel({ loop: true, autoplay: true, items: 1, animateOut: 'fadeOut', onChange: function (elem) { var current = this.currentItem; var src = elem.find(".owl-item").eq(current).find("img").attr('src'); console.log('Image current is ' + src); } }); 

Answer 1

您的代码无法正常工作的原因是没有为Owl Carousel定义的onChange回调。

有关可用选项，请参阅标题回调下的http://owlgraphic.com/owlcarousel/#customizing 。

如果您更新它以使用“afterMove”，它将在幻灯片移动后正常工作。

您可能还需要考虑使用“afterAction”，它会在启动时触发，根据您的要求移动和更新。

JS

 var owl = $(".owl-carousel"); owl.owlCarousel({ loop: true, autoplay: true, items: 1, animateOut: 'fadeOut', afterMove: function (elem) { var current = this.currentItem; var src = elem.find(".owl-item").eq(current).find("img").attr('src'); console.log('Image current is ' + src); } }); 

编辑

在进一步阅读评论中提供的链接以及owl carousel 2的文档之后，这里是一个使用owl carousel 2的工作示例。请参阅此jsfiddle

像测试中的任何东西一样，github问题和答案可能很快就会过时。 从这里的owl carousel 2网站上的文档中找到了解决方案

HTML

JS

 var owl = $(".owl-carousel"); owl.owlCarousel({ loop: true, autoplay: true, items: 1, animateOut: 'fadeOut' }); // jQuery method on owl.on('changed.owl.carousel',function(property){ var current = property.item.index; var src = $(property.target).find(".owl-item").eq(current).find("img").attr('src'); console.log('Image current is ' + src); });