Owl-Carousel 2 FAQ项内嵌轮播跳转下一章节Bug排查求助

核心Bug原因 #

• 1. 全局共用lastItem变量：所有FAQ下的轮播共用同一个全局变量存储上一张索引，不同轮播的状态会互相覆盖，直接跳转最后一页时全局变量没有同步更新为最后一页索引，导致判断条件失效。
• 2. 页码判断逻辑错误：e.page.count本身就是总页数，不需要加1，最后一页的索引为e.page.count - 1，原代码的判断阈值设置错误，永远无法触发跳转逻辑。
• 3. 开启loop:true的额外干扰（可选优化）：Owl Carousel开启循环模式时会自动复制首尾幻灯片实现无缝滚动，会额外增加索引判断的复杂度，如果不需要轮播自身循环可以直接关闭该配置。

修复后的完整代码 #

JS代码 #

$(document).ready(function() {
  // 初始化轮播，不需要轮播自循环可将loop设为false，保留也不影响修复逻辑
  $('.owl-carousel').owlCarousel({
      loop:true,
      margin:10,
      nav:true,
      autoHeight:true,
      responsive:{
          0:{
              items:1
          },
          600:{
              items:1
          },
          1000:{
              items:1
          }
      }
  })

  // 点击FAQ标题切换内容
  $('.faq-item-title').click(function(){
    $(this).next().fadeToggle();
    // 给当前FAQ下的轮播单独重置上一页索引，避免全局变量互相干扰
    $(this).next().find('.owl-carousel').data('lastItem', 0);
  });

  // 轮播切换事件
  $('.owl-carousel').on('changed.owl.carousel', function(e) {
    var carousel = e.relatedTarget,
        current = carousel.current(),
        totalPage = e.page.count,
        // 读取当前轮播自身存储的上一页索引，默认值为0
        lastItem = $(this).data('lastItem') || 0;
    
    // 跳转判断：当前页为第一页，且上一页是最后一页，说明是从最后一页向前翻触发的切换
    if (current == 0 && lastItem == totalPage - 1) {
      const curFaqContent = $(this).parent();
      const nextFaq = curFaqContent.parent().next();
      // 存在下一FAQ节点时才执行跳转
      if (nextFaq.length) {
        curFaqContent.fadeOut();
        nextFaq.find('.faq-item-content').fadeIn();
        // 重置当前轮播的索引存储
        $(this).data('lastItem', 0);
        return;
      }
    }
    // 将当前索引存储到当前轮播元素的data属性中，每个轮播独立维护状态
    $(this).data('lastItem', current);
  });
});

原有CSS、HTML代码无需修改即可正常运行。

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