猫头鹰旋转木马，带三张同步幻灯片

我正在寻找一个同步猫头鹰转盘幻灯片的解决方案。

我已经制作了一张只有2张幻灯片的同步幻灯片。

我真正需要的是一张幻灯片，它是类别，下面是第二张幻灯片，其中包含不同类别的可变内容计数。

我的解决方案是，复制/粘贴前两张幻灯片的代码，并更改所有类和所有内容。但它混淆了现在不同幻灯片上的所有课程。

这个想法还有其他解决方案吗？

Javascript

var sync1 = $(".service-line");
var sync2 =$(".servicetext");
$(".service-line").owlCarousel({
    navigation: false,
    pagination: true,
    slideSpeed: 1000,
    paginationSpeed: 500,
    paginationNumbers: true,
    singleItem: true,
    autoPlay: false,
    autoHeight:false,
    animateIn: 'slideIn',
    animateOut: 'slideOut',
    afterAction : syncPosition,
    responsiveRefreshRate : 200,
    afterMove: afterAction
});
function afterAction(){
   $( ".owl-item.active" ).find( "animation-cap" ).addClass( "animated", "bounce" );
}
$(".servicetext").owlCarousel({
     items: 1,
     pagination: false,
     slideSpeed: 800,
     paginationSpeed: 700,
     animateIn: 'slideIn',
     animateOut: 'slideOut',
     autoHeight: true,
     responsiveRefreshRate : 100,
     mouseDrag: false,
     afterInit : function(el){
         el.find(".owl-item").eq(0).addClass("synced");
     }
});
function syncPosition(el){
    var current = this.currentItem;
    $(".servicetext")
      .find(".owl-item")
      .removeClass("synced")
      .eq(current)
      .addClass("synced");
    if($(".servicetext").data("owlCarousel") !== undefined){
      center(current);
    }
  }
  $(".servicetext").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+1);
      }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);
    }
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="konfig-slide-top"> <!--TOP Slider #1 -->
    <!--TOP SLIDER slide1-->
  <div class="slider-wrap">
    <div class="slide-content">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 animation-cap">
            <h2>Category 1</h2>
          </div>
        </div>

      </div>
      <!--<img src="img/service/01.png" alt="01">-->
    </div>
  </div><!--slide1 ends-->
  <!--TOP SLIDER slide2-->
  <div class="slider-wrap">
    <div class="slide-content">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 animation-cap">
            <h2>Category 1</h2>
          </div>
        </div>

      </div>
      <!--<img src="img/service/01.png" alt="01">-->
    </div>
  </div><!--slide2 ends-->

</div>
<!-- Top Slider ends -->

<!-- Bottom Slider Starts -->
<div class="konfig-slide-bottom">
  <!-- ======  BOTTOM SLIDER Slide 1 ====== -->
  <div class="row">
    <div class="row lower-input-main">
      <!-- ======  INNER SLIDER Slide starts ====== -->
      <div class="konfig-slide-bottom-inner">
        <div class="row">
          <!--inner slider slide 1 -->
          <div class="col-md-12">
            <h1 style="color:white;">Slide 1 inner slide</h1>
          </div>
        </div>
        <div class="row">
          <!--slide 2 inner slide -->
          <div class="col-md-12">
            <h1 style="color:white;">Slide 2 inner slide</h1>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>