javascript Owl Carousel 2 - 如何获得当前物品？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33447223/
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 - how to get a current item?
提问by stackgk
I am working on a web site with Owl Carousel 2. I just want to detect which item is displayed on the front.
我正在使用 Owl Carousel 2 开发网站。我只想检测显示在前面的项目。
It used to be like this. http://owlgraphic.com/owlcarousel/demos/owlStatus.html
它曾经是这样的。 http://owlgraphic.com/owlcarousel/demos/owlStatus.html
$(document).ready(function() {
var owl = $("#owl-demo"),
status = $("#owlStatus");
owl.owlCarousel({
navigation : true,
afterAction : afterAction
});
function updateResult(pos,value){
status.find(pos).find(".result").text(value);
}
function afterAction(){
updateResult(".currentItem", this.owl.currentItem);
}
});
But it is an example of version 1. In version 2, the above doesn't work, and it seems that we should use "info" according to the official document. http://owlcarousel.owlgraphic.com/docs/api-options.html#info
但它是版本1的例子。在版本2中，上述不起作用，根据官方文档，我们似乎应该使用“信息”。 http://owlcarousel.owlgraphic.com/docs/api-options.html#info
I tried to figure out it, but there are no extra example or documents. I also went through the .js file, but couldn't get it. I wonder if the "info" is not implemented yet.
我试图弄清楚它，但没有额外的例子或文件。我还浏览了 .js 文件，但无法获取。我想知道“信息”是否尚未实施。
I don't really want to know about info, but just want to get data of current item.
我不是很想知道信息，只是想获取当前项目的数据。
I also tried this way below, but it doesn't work correctly. Do you have any possible solutions?
我也在下面尝试过这种方式，但它不能正常工作。你有任何可能的解决方案吗？
var active = $("#owl-demo").find(".owl-item.active");
console.log(active.text());
回答by atilkan
I could not leave here without answering. You do it like this. I could not find it in docs too. I dived into spagetti code.
我不能不回答就离开这里。你这样做。我也无法在文档中找到它。我深入研究了意大利面条代码。
owl.on('changed.owl.carousel', function (e) {
console.log("current: ",e.relatedTarget.current())
console.log("current: ",e.item.index) //same
console.log("total: ",e.item.count) //total
})
More Info: If you want this events to trigger initial state. You should add them before initialising owl. Like this.
更多信息：如果您希望此事件触发初始状态。您应该在初始化 owl 之前添加它们。像这样。
var owl = $("#yourItem")
owl.on('changed.owl.carousel', function (e) {
console.log("current: ",e.relatedTarget.current())
console.log("current: ",e.item.index) //same
console.log("total: ",e.item.count) //total
})
// then init
owl.owlCarousel({settings})
回答by Ana Vivas
var owl = $("#yourItem")
owl.on('changed.owl.carousel', function (e) {
$('.current').text(e.relatedTarget.relative(e.relatedTarget.current()) + 1);
$('.allitems').text(e.item.count);
})
// then init
owl.owlCarousel({settings})
回答by alib0ng0
owl.on('changed.owl.carousel', function (e) {
//console.log("current: ",e.item.index) //same
if (("current: ",e.item.index == 0)){
console.log("page01");
}
if (("current: ",e.item.index == 1)){
console.log("page02");
}
})
