移动端Owl Carousel点击轮播圆点后滑动出现双激活圆点问题

问题复现特征 #

点击任意圆点切换轮播项后，手动滑动轮播切换到其他内容，之前点击的圆点会一直保持激活状态，同时存在两个激活圆点。
问题示例：

修复方案 #

方案一：升级官方版本 #

该问题是Owl Carousel低版本的已知状态同步bug，优先升级到2.3.4及以上稳定版，官方已在该版本修复了圆点点击态与滑动切换的状态同步逻辑。

方案二：手动事件监听修复（适配无法升级版本的场景） #

在轮播初始化配置中加入translated事件监听，每次轮播切换完成后强制统一圆点激活态：

$('.owl-carousel').owlCarousel({
  // 保留你原有的所有配置项，例：
  // loop: true,
  // margin: 10,
  // nav: true,
  // 新增以下事件回调
  onTranslated: function (event) {
    // 移除所有圆点的激活类
    $('.owl-dot').removeClass('active');
    // 为当前对应索引的圆点添加激活类
    $('.owl-dot').eq(event.item.index).addClass('active');
  }
})

方案三：修复伪类样式冲突 #

如果以上方案仍不生效，检查自定义CSS是否为.owl-dot的:focus/:active伪类设置了和active类一致的高亮样式，移动端点击元素后会默认保留聚焦状态，新增CSS重置即可：

.owl-dot:focus {
  outline: none;
  /* 如有自定义聚焦高亮样式，此处同步重置为非激活态样式 */
}

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