猫头鹰旋转木马2活动上一个/下一个导航项目

我正在使用owl-carousel2来设置声音播放列表(使用loop: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');
      });

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

感谢帮助

回答(2)

2 years ago

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

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

2 years ago

我想: Your target is to click owl item and auto scroll left or right one item.

如果是,请确保您的物品长度> 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');
        }
    });