owlcarouselの同じボタン/コントローラで2つのスライダのコンポーネントを制御しますか？

Question

私は2つのフクロウカルーセルを持っています。そして、一方は他方の上にある。 1つはあるコンテンツの画像であり、他のものはコンテンツのみである。そして、両方のスライダを一緒に変更する必要があります。

このコンテンツスライダの下コード

     <div id="owkey-content-slider" class="owl-carousel"> 
         <div class="item"> 

          <div class="slider-content"> 
           <h4>WE CREATE</h4> 
          </div> 
         </div> 
         <div class="item"> 
          <div class="slider-content"> 
           <h4>WE BUILD</h4> 
          </div> 
         </div> 
         <div class="item"> 
          <div class="slider-content"> 
           <h4>WE OFFER</h4> 
          </div>      
         </div> 
         <div class="item"> 
          <div class="slider-content"> 
           <h4>WE DELIVER</h4> 
          </div> 
         </div> 
        </div> 

これは、画像スライダー

 <div class="header-bg-image-slide"> 
     <div id="owkey-bg-slider" class="owl-carousel"> 
      <div class="item"> 
       <img src="img/owkey-slider-2.jpg"> 
       <div class="number-item">01</div> 
      </div> 
      <div class="item"> 
       <img src="img/owkey-slider.jpg"> 
       <div class="number-item">02</div> 

      </div> 
      <div class="item"> 
       <img src="img/shutterstock_327808505.jpg"> 
       <div class="number-item">03</div>      
      </div> 
      <div class="item"> 

       <img src="img/owkey-head.png"> 
       <div class="number-item">04</div> 
      </div> 
     </div> 

ためのコードであり、それらは、同じ条件/パラメータで初期化されます。彼らは一緒に変化しています。しかし、ボタンがクリックされたとき、それらのボタンは画像スライダ用であり、他のスライダの内容は確かに変更されません。

<script type="text/javascript"> 
    $(document).ready(function() { 
     var owl = $("#owkey-bg-slider, #owkey-content-slider"); 
     owl.owlCarousel({ 
      navigation : true, 
      navigationText: ["<i class=\"fa fa-angle-up\">","<i class=\"fa fa-angle-down\">"], 
      singleItem : true, 
      transitionStyle : "fade", 
      autoPlay: true, 
      touchDrag: false, 
      mouseDrag: false 
     }); 
    }) 
</script> 

私はこの経験豊かなフクロウカルーセルのユーザーが私を助けることができると思います。

ここでは、他の種類のスライダーではありませんが、フローカルーセルではない問題が解決されています。

Answer 1

Flickity Sliderを使用すると、はるかに優れたスライダープラグインです。