猫头鹰轮播2-获取当前幻灯片的src [英] Owl Carousel 2 - Get src of current slide

问题描述

我有以下代码块.我要做的就是在幻灯片放映中获取当前图像的src.它无法正常工作，即使更改了幻灯片效果，控制台中也没有任何显示.

I have the following code blocks. All i'm trying to do is get the src of the current image in the slide show. It's not working, nothing appears in the console at all despite it changing slide fine.

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

推荐答案

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

The reason your code is not working is that there is no onChange callback defined for Owl Carousel.

请参见 http://owlgraphic.com/owlcarousel/#customizing 可用选项.

如果将其更新为使用"afterMove"，则在移动幻灯片后它将可以正常工作.

If you update it to use "afterMove" it will work correctly after the slide has been moved.

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

You might also want to consider using "afterAction" which fires on startup, move and update depending on your requirements.

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

编辑

在进一步阅读猫头鹰轮播2的注释和文档中提供的链接之后，这里是使用猫头鹰轮播2的工作示例.请参见 jsfiddle

就像beta中的任何东西一样，github问题和答案可能很快就过时了.从owl carousel 2网站上的文档中找到了解决方案，在此处 的HTML

Like anything in beta the github issues and answers can be quickly out of date. Found the solution from the documentation on the owl carousel 2 site here

<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>

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

这篇关于猫头鹰轮播2-获取当前幻灯片的src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！