首页 文章

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

提问于
浏览 1331
0

我正在使用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');
    });
    
  • 0

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

相关问题