Owl Carousel 2 - 获取当前幻灯片的 src答案

【问题标题】：Owl Carousel 2 - Get src of current slideOwl Carousel 2 - 获取当前幻灯片的 src
【发布时间】：2015-01-19 10:18:54
【问题描述】：

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

HTML：

<div id="banner" class="owl-carousel">
    <img src="template/banner-1.jpg" alt="">
    <img src="template/banner-2.jpg" alt="">
    <img src="template/banner-1.jpg" alt="">
    <img src="template/banner-2.jpg" alt="">
</div>

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

【问题讨论】：

标签： jquery owl-carousel-2

【解决方案1】：

您的代码不起作用的原因是没有为 Owl Carousel 定义 onChange 回调。

请参阅标题回调下的http://owlgraphic.com/owlcarousel/#customizing 以获取可用选项。

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

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

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

编辑

进一步阅读 cmets 中提供的链接和 owl carousel 2 的文档后，这里是一个使用 owl carousel 2 的工作示例。请参阅jsfiddle

与 beta 中的任何内容一样，github 问题和答案可能很快就会过时。从 owl carousel 2 站点 here987654323@ 的文档中找到解决方案

HTML

<div id="banner" class="owl-carousel">
    <img src="http://www.live-on-the-edge.com/wp-content/uploads/2014/06/Sam-Tomkins-730x547.jpg" alt=""/>
    <img src="http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2009/6/11/1244720277422/Aussie-Rugby-League-001.jpg" alt=""/>
    <img src="http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2010/1/7/1262873655905/Rugby-referee-001.jpg" alt=""/>
    <img src="http://static.guim.co.uk/sys-images/Sport/Pix/columnists/2011/3/3/1299187263691/football-league-premier-l-007.jpg" alt=""/>
</div>

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

【讨论】：

实际上，onChange 确实可以在没有该功能的情况下工作 (github.com/OwlFonk/OwlCarousel/issues/222#issuecomment-41021575)，我认为该功能存在问题。如果我从 onChange 中运行警报或 console.log ，它就可以正常工作。我正在使用 owl carousel 2。在我的原始代码块中使用了 afterMove，但这也不起作用，onChange 是我的脚本所需要的。
@AndyHolmes - 刚刚浏览了 owl carousel 2 网站上的文档并让它为您工作。请参阅上面的编辑答案。
非常感谢！！这解决了我的问题。这就是您通过您的方法获得item.index 的方式。谢谢！
猫头鹰旋转木马 2 中既没有 afterAction 也没有 afterMove。您应该将其删除为最佳答案，以免混淆像我这样的落后者...
@LyndonJohnson - 阅读整个问题，包括正确答案的编辑。