Управление двумя компонентами ползунка с одинаковыми кнопками/контроллерами в owlcarousel?

Question

У меня есть две совы карусели. И один над другим. Один - это изображение с некоторым контентом, а другое - только контент. И оба слайдера должны измениться вместе.

Это ниже код содержимого ползунка

     <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, это гораздо лучший плагин слайдера.