猫头鹰旋转木马2活动上一个/下一个导航项目-Java 学习之路

我正在使用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 回答

1
它与之前的触发器相同 . 请参阅示例代码：
```
$(".prev").on('click', function () {
    owl.trigger('prev.owl.carousel');
});
```
回复于 2024-05-08T10:24:52+08:00

我想： 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');
        }
    });

回复于 2024-05-08T10:24:52+08:00

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

2 回答

相关问题