Question

我正在使用owl-carousel2设置声音播放列表（循环：true和center：true），一切正常，但我找不到关于我的问题的文档：

我正在尝试在点击时为每个项目添加上一个/下一个导航。我希望用户可以点击他选择的项目，所以它滑动到这个项目的中心。它适用于鼠标滑动，但不适用于项目点击。

有办法做到这一点吗？

有我的carousel init：

owl.owlCarousel({
            loop:true,
            center: true,
            margin:3,
            dot: false,
            nav: false,
            items:5,
            responsive:{
                0:{
                    items:2
                },
                768:{
                    items:4
                },
                1200:{
                    items:5
                },
                1500:{
                    items:4
                }
            }
      });

我试过了：

owl.on('click', '.item', function (property) {
          console.log(property);
          owl.trigger('next.owl.carousel');
      });

它有效，但仅适用于下一个项目，我不知道如何知道它是否是一个普通的点击

感谢您的帮助

Answer 1

它与之前的触发器相同。请参阅示例代码：

$(".prev").on('click', function () {
    owl.trigger('prev.owl.carousel');
});

Answer 2

我猜：您的目标是点击猫头鹰项目并自动向左或向右滚动一个项目。

如果是，请确保您的商品长度＆gt; 1。

尝试使用以下代码：

owl.on('click', '.item', function (property) {
        var $currentItem = $(property.target).closest('.owl-item');
        var $activeItems = owl.find('.active');
        if ($currentItem.index() - $($activeItems[0]).index() <= $activeItems.length / 2 - 1)
        {
            owl.trigger('prev.owl');
        }
        else if ($($activeItems[$activeItems.length - 1]).index() - $currentItem.index() <= $activeItems.length / 2 - 1)
        {
            owl.trigger('next.owl');
        }
    });

Owl carousel 2活跃上一个/下一个导航项目

2 个答案: