如何获取用户当前浏览位置对应的Owl Carousel轮播图索引？

Owl Carousel当前索引获取方案 #

你提到的根据轮播当前位置修改对应文本的需求，拿到当前索引后即可快速实现，不同版本的获取方法如下：

• 主流2.x版本
  方案1：绑定切换事件实时获取，适合切换时同步更新文本的场景

  // 初始化轮播同时绑定切换事件
  $('.owl-carousel').owlCarousel({
    // 你的原有配置，比如loop、autoplay等
  }).on('changed.owl.carousel', function(e) {
    // 获取当前索引，索引从0开始计数，自动兼容loop模式克隆项问题
    const currentIdx = e.relatedTarget.current();
    // 此处写入你的文本修改逻辑，根据currentIdx匹配对应红色箭头的文本节点修改内容即可
  })
  

  方案2：主动调取索引，适合任意时刻需要读取当前轮播位置的场景

  // 获取轮播实例
  const owl = $('.owl-carousel').data('owl.carousel');
  // 读取当前索引
  const currentIdx = owl.current();
  

• 1.x旧版本
  直接读取实例属性即可：

  const owl = $('.owl-carousel').data('owlCarousel');
  const currentIdx = owl.currentItem;
  

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