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을 사용하면 훨씬 좋은 슬라이더 플러그인입니다.