Question

我正在与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中，上面的内容不起作用，似乎我们应该使用＆＃34; info＆＃34;根据官方文件。 http://owlcarousel.owlgraphic.com/docs/api-options.html#info

我试图找出它，但没有额外的例子或文件。我也浏览了.js文件，但无法得到它。我想知道＆＃34; info＆＃34;尚未实施。

我真的不想知道信息，但只想获取当前项目的数据。

我也尝试过这种方式，但它没有正常工作。你有任何可能的解决方案吗？

var active = $("#owl-demo").find(".owl-item.active");
console.log(active.text());

Answer 1

我没有回答就离开这里。你这样做。我也无法在文档中找到它。我潜入了spagetti代码。

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

Answer 2

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

Answer 3

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 Carousel 2 - 如何获取当前项目？

3 个答案: