jQuery Owl Carousel 2 - 获取当前幻灯片的 src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28022311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Owl Carousel 2 - Get src of current slide
提问by Andy Holmes
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.
我有以下代码块。我想要做的就是获取幻灯片中当前图像的 src。它不起作用，尽管它可以很好地改变幻灯片，但控制台中根本没有出现任何内容。
HTML:
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:
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);
}
});
回答by wildavies
The reason your code is not working is that there is no onChange callback defined for Owl Carousel.
您的代码不起作用的原因是没有为 Owl Carousel 定义 onChange 回调。
See http://owlgraphic.com/owlcarousel/#customizingunder the heading callback for the available options.
有关可用选项，请参阅标题回调下的http://owlgraphic.com/owlcarousel/#customizing。
If you update it to use "afterMove" it will work correctly after the slide has been moved.
如果您更新它以使用“afterMove”，它会在移动幻灯片后正常工作。
You might also want to consider using "afterAction" which fires on startup, move and update depending on your requirements.
您可能还想考虑使用“afterAction”，它会根据您的要求在启动、移动和更新时触发。
JSvar 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);
}
});
Edit
编辑
Following further reading of the link provided in the comments and the documentation for owl carousel 2 here is a working example using owl carousel 2. See this jsfiddle
进一步阅读评论中提供的链接和 owl carousel 2 的文档后，这里是一个使用 owl carousel 2 的工作示例。请参阅此jsfiddle
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
与测试版中的任何内容一样，github 问题和答案可能很快就会过时。从此处的 owl carousel 2 站点上的文档中找到了解决方案
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);
});
