4

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

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

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

我正在尝试做的图片： 物品移动的待定图片

4

2 回答 2

14

显然，您谈论的是 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()只接受相对位置。
于 2014-08-07T17:36:21.203 回答
-1

您可以使用 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. 自定义事件”以了解有关事件的更多详细信息。

于 2014-08-07T13:26:25.353 回答