OwlCarousel轮播nav导航跳转异常、dots指示点功能失效问题咨询

修复方案 #

两个异常都可以通过调整初始化配置解决：

• dots指示点不显示：OwlCarousel部分版本受引入的主题文件影响，会默认关闭指示点，手动在配置中加dots: true强制开启即可。
• next按钮点击多次跳转过快：loop模式下组件自动计算滑动步长容易出现偏差，明确指定每次只滑动1个元素就能解决。

修改后的完整初始化代码：

$('.main-car-owl').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    dots: true, // 开启指示点
    slideBy: 1, // 每次点击仅滑动1个元素
    slideTransition: 300, // 固定滑动动画时长，避免无动画跳变
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
});

如果调整配置后导航跳转仍有异常，可做两个排查：

1. 检查页面是否重复加载了owl.carousel.min.js文件，重复加载会导致单次点击触发多次滑动事件
2. 确认没有自定义JS代码绑定了.owl-nav button的点击事件，避免和组件原生事件冲突

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