Owl Carousel在Bootstrap垂直标签页内无法正常工作如何解决

Bootstrap标签页组件中，未激活的.tab-pane默认设置了display: none样式，Owl Carousel初始化时需要读取父容器的实际尺寸，来计算轮播项宽度、排布位置等布局参数。如果初始化时父容器处于隐藏状态，组件读取到的容器宽度为0，就会出现轮播项堆叠、导航按钮失效、宽度显示异常等问题。即便轮播放在默认激活的首个标签页中，Bootstrap标签页自带的fade淡入动画也可能存在时序问题，导致轮播初始化时尺寸计算错误。

方案1：监听标签页显示完成事件初始化/刷新轮播（推荐） #

不要在页面加载完成后直接初始化标签页内的轮播，改为绑定Bootstrap标签页的切换完成事件，等对应标签页完全显示后再执行初始化；如果轮播已经初始化过，就调用组件自带的refresh方法重新计算布局即可。
替换原有jQuery初始化代码为以下内容：

jQuery(document).ready(function($){
  // 监听标签页完全显示的事件
  $('[data-toggle="pill"]').on('shown.bs.tab', function (e) {
    // 校验当前激活的是否为放置轮播的标签页
    var activePaneId = $(e.target).attr('aria-controls');
    if(activePaneId !== 'v-pills-home') return;

    var $carousel = $('#main');
    // 判断轮播是否已经完成初始化
    if(!$carousel.find('.owl-stage-outer').length){
      // 未初始化则执行初始化逻辑
      $carousel.owlCarousel({
        speed: 800,
        margin: 15,
        autoplay: false,
        nav: true,
        responsive:{
          0: { items: 1 },
          600: { items: 3 },
          1000: { items: 3 }
        }
      })
    }else{
      // 已初始化则触发刷新方法，重新计算布局尺寸
      $carousel.trigger('refresh.owl.carousel');
    }
  })

  // 页面首次加载时，主动触发默认激活标签的显示事件，保证首屏轮播正常渲染
  $('#v-pills-home-tab').trigger('shown.bs.tab');
});

方案2：通过CSS调整标签页隐藏逻辑（临时方案） #

如果不想调整JS初始化逻辑，可以修改未激活标签页的隐藏方式，不用display: none，改为通过透明度和高度隐藏元素，保证轮播初始化时能读取到正确的容器宽度，缺点是会影响标签页淡入动画的流畅度：

.tab-content .tab-pane.fade:not(.show) {
  display: block;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.tab-content .tab-pane.fade.show {
  height: auto;
  opacity: 1;
}

• 不要重复初始化同一个Owl Carousel实例，否则会出现导航按钮重复生成、自动播放逻辑混乱等问题，上述代码已经加了初始化状态判断
• 必须绑定shown.bs.tab事件，不能用show.bs.tab事件：前者是标签页完全显示、动画执行完毕后才触发，后者在切换动作刚开始时就会触发，此时容器还未完成渲染，读取到的尺寸依然是错误的

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