貓頭鷹傳送帶改變圖像

Question

是否有可能改變依賴於貓頭鷹傳送帶當前幻燈片的圖像？
我知道貓頭鷹傳送帶內有events，但我沒有找到我想要的東西。

在此先感謝每個花時間回答問題的人。

Screenshot

HTML：

<div class="row"> 
<div class="col-lg-3 hidden-md hidden-sm hidden-xs"> 
    <div> 
     <img src="image1.png"/> <!-- change to image2.png if slide 2 is active --> 
    </div> 
</div> 
<div class="owl-carousel-team"> 
    <div class="col-lg-9 col-md-12 item"> 
     <h3>Slide 1</h3> 
     <div class="row"> 
      <div class="content"></div> 
     </div> 
    </div> 
    <div class="col-lg-9 col-md-12 item"> 
     <h3>Slide 2</h3> 
     <div class="row"> 
      <div class="content"></div> 
     </div> 
    </div> 
</div> 

的Javascript：

var teamCarousel = function(){ 
    var owl = $('.owl-carousel-team'); 
    owl.owlCarousel({ 
     loop:true, 
     margin:0, 
     autoHeight:false, 
     smartSpeed: 500, 
     responsiveClass:true, 
     responsive:{ 
      0:{ 
       items:1, 
      }, 
      1000:{ 
       items:1, 
       nav:false, 
       dots: true, 
      } 
     } 
    }); 
}; 


$(function(){ 
    fullHeight(); 
    sliderMain(); 
    centerBlock(); 
    responseHeight() 
    mobileMenuOutsideClick(); 
    offcanvasMenu(); 
    burgerMenu(); 
    toggleBtnColor(); 
    contentWayPoint(); 
    teamCarousel(); 
}); 

Answer 1

您可以通過

檢測到您的幻燈片運動

owl.on('translated.owl.carousel', function(event) { 
    // Your code here 
}) 

對後滑塊移動

給一個id你的形象標籤使用translated.owl.carousel，然後獲取活動滑塊圖像源，並設置爲<img/>

例如

owl.on('translated.owl.carousel', function(event) { 

    var now_src = $('.owl-carousel').find('.owl-item.active img').attr('src'); 

    $('#you_img_id').attr('src', now_src); 
}) 

這裏的演示https://jsfiddle.net/566j4jsf/