当bootstrap隐藏选项卡处于活动状态时，某些jquery代码无法正常工作

Question

我在我的项目中使用owl carousel和bootstrap，我也根据我的需要修改了同步的owl轮播，并在引导标签中放了两个owl轮播，在默认选项卡上这个工作正常，但是当我切换tab，jquery代码时我写的不是工作。

Please refer code-pen link

JS代码：

$(document).ready(function() {
  $('.nav-tabs a').on('shown.bs.tab', function(){

   var sync1 = $("#sync11");
   var sync2 = $("#sync21");

   sync1.owlCarousel({
    singleItem : true,
    slideSpeed : 1000,
    navigation: true,
    pagination:false,
    afterAction : syncPosition,
    responsiveRefreshRate : 200,
  });

   sync2.owlCarousel({
    items : 5,

    pagination:false,
    responsiveRefreshRate : 100,
    afterInit : function(el){
      el.find(".owl-item").eq(0).addClass("synced");
    }
  });

   function syncPosition(el){
    var current = this.currentItem;
    $("#sync21")
    .find(".owl-item")
    .removeClass("synced")
    .eq(current)
    .addClass("synced")
    if($("#sync21").data("owlCarousel") !== undefined){
      center(current)
    }

  }

  $("#sync21").on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = $(this).data("owlItem");
    sync1.trigger("owl.goTo",number);
  });

  function center(number){
    var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
    var num = number;
    var found = false;
    for(var i in sync2visible){
      if(num === sync2visible[i]){
        var found = true;
      }
    }

    if(found===false){
      if(num>sync2visible[sync2visible.length-1]){
        sync2.trigger("owl.goTo", num - sync2visible.length+2)
      }else{
        if(num - 1 === -1){
          num = 0;
        }
        sync2.trigger("owl.goTo", num);
      }
    } else if(num === sync2visible[sync2visible.length-1]){
      sync2.trigger("owl.goTo", sync2visible[1])
    } else if(num === sync2visible[0]){
      sync2.trigger("owl.goTo", num-1)
    }
  }
});

  var sync1 = $("#sync1");
  var sync2 = $("#sync2");

  sync1.owlCarousel({
    singleItem : true,
    slideSpeed : 1000,
    navigation: true,
    pagination:false,
    afterAction : syncPosition,
    responsiveRefreshRate : 200,
  });

  sync2.owlCarousel({
    items : 5,
    pagination:false,
    responsiveRefreshRate : 100,
    afterInit : function(el){
      el.find(".owl-item").eq(0).addClass("synced");
    }
  });

  function syncPosition(el){
    var current = this.currentItem;
    $("#sync2")
    .find(".owl-item")
    .removeClass("synced")
    .eq(current)
    .addClass("synced")
    if($("#sync2").data("owlCarousel") !== undefined){
      center(current)
    }
  }

  $("#sync2").on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = $(this).data("owlItem");
    sync1.trigger("owl.goTo",number);
  });

  function center(number){
    var sync2visible = sync2.data("owlCarousel").owl.visibleItems;

    var num = number;
    var found = false;
    for(var i in sync2visible){
      if(num === sync2visible[i]){
        var found = true;
      }
    }

    if(found===false){
      if(num>sync2visible[sync2visible.length-1]){
        sync2.trigger("owl.goTo", num - sync2visible.length+2)
      }else{
        if(num - 1 === -1){
          num = 0;
        }
        sync2.trigger("owl.goTo", num);
      }
    } else if(num === sync2visible[sync2visible.length-1]){
      sync2.trigger("owl.goTo", sync2visible[1])
    } else if(num === sync2visible[0]){
      sync2.trigger("owl.goTo", num-1)
    }
  }

我的剧本：

  var all = $(".side .owl-wrapper .owl-item ").length;
  console.log(all);
  var height1 = $(".side .owl-wrapper .owl-item ").height();
  var height = $(".side .owl-wrapper .owl-item ").height() * 5;
  $(".side .owl-wrapper").css("height", height +"px");
  var syncposi = $(".side .owl-wrapper .synced").index();
  console.log(syncposi);
  if (syncposi ==0) {
    $(".owl-prev").css({"pointer-events":"none", "opacity":0.3});
  }

  $(".owl-next").click(function(){
   var index = $(".side .owl-wrapper .synced").index();
   if (index > 4 && index <=22) { 
    $('.side .owl-wrapper').animate({scrollTop:'+='+height1});

  }
  $(".owl-prev").css({"pointer-events":"auto", "opacity":1});
  if(index==0) {
    $('.side .owl-wrapper').scrollTop(0);
    console.log("hi");
  }
});
  $(".owl-prev").click(function(){
   var index = $(".side .owl-wrapper .synced").index();
   if (index >5) {
    $('.side .owl-wrapper').animate({scrollTop:'-='+height1});
  }
  if (index <2) {
    $('.side .owl-wrapper').animate({scrollTop:'-='+height1*2});
  }

  if (index ==0) {
    $(".owl-prev").css({"pointer-events":"none", "opacity":0.3});
  }
});

  setInterval(function(){
    var syncposi = $(".side .owl-wrapper .synced").index();
    if (syncposi ==0) {
      $(".owl-prev").css({"pointer-events":"none", "opacity":0.3});
    }
  },100);

});