jquery - Owl Carousel : Getting index of object that is clicked

Question

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

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

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

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

Answer 1

显然，您谈论的是 2.0 beta 版，因为您正在使用 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() 仅接受相对位置。