Owl Carousel检测item数量并禁用对应导航箭头的实现咨询

问题排查 #

• 事件配置位置错误：onDragged属于全局回调配置，你错误将其写在了responsive响应式断点规则内，仅1000px及以上宽度下才会生效，其余宽度下拖拽不会触发回调
• 回调未接收参数：Owl Carousel的事件回调会主动传入事件对象作为参数，你没有在函数形参中声明接收，直接使用event会因变量不存在报错
• 属性取值方式错误：你使用的event.items.count不是事件对象的合法属性，无法正确拿到轮播项总数

修正后完整实现代码 #

// 初始化轮播
var owl = $('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    responsiveClass: true,
    dots: false,
    // 全局事件回调写在配置最外层
    onInitialized: checkNavStatus, // 初始化完成就检测导航状态
    onDragged: callback,
    responsive: {
        0: {
            items: 1,
            nav: false,
        },
        767: {
            items: 2,
            nav: false
        },
        1000: {
            items: 3,
            nav: true,
            loop: false
        }
    }
})

// 拖拽回调函数，接收event参数
function callback(event) {
    // 取轮播项总数量
    var totalItems = owl.find('.owl-item').length;
    // 取当前激活项索引
    var currentIndex = event.item.index;
    console.log('总数量：', totalItems, '当前索引：', currentIndex);
    // 拖拽后检测导航状态
    checkNavStatus();
}

// 检测并控制导航箭头显隐
function checkNavStatus() {
    var totalItems = owl.find('.owl-item').length;
    // 仅当前断点开启导航的场景下执行判断
    if (owl.find('.owl-nav').length) {
        if (totalItems === 1) {
            owl.find('.owl-nav').hide();
        } else {
            owl.find('.owl-nav').show();
        }
    }
}

实现说明 #

• 新增了初始化完成的检测逻辑，避免只有拖拽操作才触发导航状态判断
• 直接通过实例的dom查询获取轮播项总数量，兼容性更强，不受轮播loop克隆节点影响
• 适配你现有的响应式规则，仅在1000px及以上宽度（开启导航的断点）下判断导航显隐

内容的提问来源于stack exchange，提问作者Agata