OWL Carousel：获取被点击对象的索引答案

【问题标题】：OWL Carousel: Getting index of object that is clickedOWL Carousel：获取被点击对象的索引
【发布时间】：2014-08-07 12:01:46
【问题描述】：

所以我试图在我正在设计的 UI 上使用 Carousel 进行导航，我只是想知道是否有一种方法可以轻松地获取 carousel 中一个 div 对象的索引。

当我点击其中一个 div 时，我试图让它在轮播中居中，所以如果我可以获得已点击的 div 的索引，我可以调用下面的代码将其设置为中心项目。

var owl = $('.owl-carousel');
owl.owlCarousel();
owl.trigger('to.owl.carousel', NUMBEROFDIVCLICKED);

我正在尝试做的事情的图片：

【问题讨论】：

我添加了一个演示来证明我的答案。

标签： jquery owl-carousel

【解决方案1】：

显然您在谈论 2.0 测试版，因为您使用的是 to.owl.carousel。我不会采用 Leif 的解决方案，因为它在很多情况下都行不通。所以这就是你可以做的：

$('.owl-carousel').on('click', '.owl-item', function(e) {
  var carousel = $('.owl-carousel').data('owl.carousel');
  e.preventDefault();
  carousel.to(carousel.relative($(this).index()));
});

这是demo。但请注意它是测试版，可能会改变。您还必须使用最新的development。

取决于您使用的插件（导航），您必须像这样编写to 调用：

carousel.to(carousel.relative($(this).index()), false, true);

这里有一些解释：

$(this).index() 是 jQuery 的一部分，它为您提供被单击项目 .owl-item 在其容器中的位置。
$('.owl-carousel').data('owl.carousel') 为您提供了 Owl Carousel 的插件对象，因此您可以直接使用 API，而无需使用插件方法 ($('.owl-carousel').owlCarousel('method', 'arg')) 或 jQuery 事件 ($('.owl-carousel').trigger('method', ['arg']))。
carousel.relative($(this).index()) 为您提供单击项目的相对位置。当您激活 loop 时，这始终是必要的，它使用克隆项目，因此在您启动插件之前您有更多项目。
carousel.to() 只接受相对位置。

【讨论】：

我正在使用 2.0.0-beta.2.4 并且数据“owl.carousel”不再存在，我找到了owlCarousel，但是点击一个项目的结果是......奇怪......它似乎这是这个版本的错误... to(0) 将第一项放在第一位，to(1) 将第二项放在第三位... to(2) 将第三项放在第三位 to （结果与t(0))
我用了e.page.index，给出的相对索引好像克隆不存在
@witrin 谢谢你，我正在使用启用循环的“to.owl.carousel”触发器并将我的头撞到墙上！现在完美运行。
它的工作原理，.. 为什么这个 owl.carousel 的东西没有自己的点击监听器

【解决方案2】：

您可以使用 owl.goTo 事件。但是，这会将提供的项目全部滚动到左侧。例如：如果您显示 5 个项目，就像在您的屏幕截图中一样，您必须使用 index - 2：

owl.find('.owl-wrapper').on('click', '.owl-item', function(e) { 
    e.preventDefault(); 
    owl.trigger('owl.goTo', $(this).index() - 2) 
});

阅读“4. 自定义事件”http://owlgraphic.com/owlcarousel/#customizing 了解有关事件的更多详细信息。

【讨论】：