我正在使用 Owl Carousel 2 开发一个网站。 我只是想检测哪个项目显示在前面。
以前是这样的。 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);
}
});
但这是版本 1 的示例。 在版本2中,上面的方法不起作用,看来我们应该根据官方文档使用“info”。 http://owlcarousel.owlgraphic.com/docs/api-options.html#info
我试图弄清楚它,但没有额外的示例或文档。我也浏览了 .js 文件,但无法获取它。我想知道“信息”是否还没有实现。
我并不是真的想了解信息,只是想获取当前项目的数据。
我也尝试过下面的这种方法,但它不能正常工作。 你有什么可行的解决办法吗?
var active = $("#owl-demo").find(".owl-item.active");
console.log(active.text());
不回答我就不能离开这里。 你这样做。我在文档中也找不到它。我深入研究了源代码。
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
})
更多信息:如果您希望此事件触发初始状态。您应该在初始化 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})
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})
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");
}
})
这个
owl.on('changed.owl.carousel', function (e) { // });
对我不起作用,它返回了无效的索引。我只有 3 张幻灯片,但它返回索引 4。 因此,我使用 jQuery 捕获了活动幻灯片,并向内容添加了 HTML 属性,以获取当前活动元素的 id。
然后我通过该 ID 过滤了我的 JSON 数组。我可能只是一个解决方法没有帮助。我的代码运行良好。
可以通过owl事件获取函数触发
var itemID = jQuery('#owl-parent').find(".owl-item.active").find('.item-content').data('itemid');
注意:它不会返回正确的 ID,因为猫头鹰动画正在进行中。您可以添加超时并获取激活的幻灯片。