フクロウカルーセル画像を変更する

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 
}) 

スライダーが

がアクティブスライダーイメージソースを取得し、<img/>

例えばに設定し、その後、あなたのイメージタグにIDを付けて移動した後のため

使用translated.owl.carousel

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/

です