双图像滑块JS问题

Question

我正在尝试使用Owl Carousel创建双图像滑块，在同一页面上显示2个单独的滑块。作为JS的新手我认为我的方法可能不正确，因为只有第一个滑块似乎正在工作。我不认为问题在于CSS的渲染，因为我将它们拆分为ID＃slider-one和＃slider-two。任何帮助将非常感激。谢谢！

HTML：

    <div class="container">

    <div class="sliderPanel"> 
      <div id="slider">
        <div class="container-fluid">
          <div class="row">
              <h3>slider one</h3>
                <div id="slider-one" class="slider">
                 <div class="item"><!--item 1-->

                </div>
                <div class="item"><!--item 2-->

                </div>
                <div class="item"><!--item 3-->

                </div>
                <div class="item"><!--item 4-->

                </div>
                <div class="item"><!--item 5-->

                </div>
                 <div class="item"><!--item 6-->

                </div>
               </div>
                <div class="slider-one-nav"><!--slider nav btn-->
                  <a class="btn prev"><i class="fa fa-caret-left"></i></a> 
                  <a class="btn next"><i class="fa fa-caret-right"></i></a> 
                 </div>
               </div> <!--./row-->
              </div> <!--./cont fluid-->
             </div> <!--./slider-->
            </div> <!--./sliderPanel-->
          </div><!--./cont-->

    <!--SLIDESHOW 2-->

    <div class="container">

    <div class="sliderPanel"> 
     <div id="slider">
        <div class="container-fluid">
          <div class="row">
              <h3>slider 2 </h3>
                <div id="slider-two" class="slider">
                 <div class="item"><!--item 1-->

                </div>
                <div class="item"><!--item 2-->

                </div><!--item end-->
                <div class="item"><!--item 3-->

                </div><!--item end-->
                <div class="item"><!--item 4-->

               </div><!--item end-->
                </div>
                <div class="slider-two-nav"><!--slider nav btn-->
                  <a class="btn prev"><i class="fa fa-caret-left"></i></a> 
                  <a class="btn next"><i class="fa fa-caret-right"></i></a> 
                </div>
               </div> <!--./row-->
              </div> <!--./cont fluid-->
             </div> <!--./slider-->
            </div> <!--./sliderPanel-->
          </div><!--./cont-->
         </div><!--./panelContent-->

JavaScript的：

<!--js for slider(s)-->
    <script type="text/javascript">
        $(document).ready(function() {
          var owl = $("#slider-one");
          var owl2 = $("#slider-two");
          owl.owlCarousel({
          autoPlay: 3500,
          items : 3, //10 items above 1000px browser width
          itemsDesktop : [900,3], //5 items between 1000px and 901px
          itemsDesktopSmall : [800,3], // 3 items between 900px and 601px
          itemsTablet: [600,2], //2 items between 600 and 0;
          itemsMobile : false, // itemsMobile disabled - inherit from 
itemsTablet option
          pagination:false
          });

          owl2.owlCarousel({
          autoPlay: 4500,
          items : 3, //10 items above 1000px browser width
          itemsDesktop : [900,3], //5 items between 1000px and 901px
          itemsDesktopSmall : [800,3], // 3 items between 900px and 601px
          itemsTablet: [600,2], //2 items between 600 and 0;
          itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
          pagination:false
          });

          $(".next").click(function(){
              owl.trigger('owl.next');
          })
          $(".prev").click(function(){
              owl.trigger('owl.prev');
          })
          $(".next").click(function(){
              owl2.trigger('owl2.next2');
          })
          $(".prev").click(function(){
              owl2.trigger('owl2.prev2');
          })
        });
    </script>