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

Question

所以我正在尝试使用Carousel在我正在设计的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()));
});

这是一个演示.但请注意它是测试版,可能会改变.您还必须使用最新的开发.

根据您正在使用的插件(导航),您必须编写如下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() 只接受相对位置.