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

Question

所以我正在尝试使用Carousel在我正在设计的UI上进行导航，我只是想知道是否有办法轻松获取旋转木马中其中一个div对象的索引。

当我点击其中一个div时，我正试图制作它，它将它集中在旋转木马中，所以如果我可以获得已被点击的div的索引，我可以调用下面的代码将其设置为中心项目。

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

我想要做的事情的图像：

Answer 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()只接受相对位置。

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

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