Owl-Carousel Bild ändern

Question

ist es möglich, ein Bild abhängig von der aktuellen Folie in Eulenkarussell zu ändern?
Ich weiß, dass es events in Eulenkarussell gibt, aber ich habe nicht gefunden, was ich wollte.

Vielen Dank im Voraus an alle, die sich die Zeit nehmen, die Fragen zu beantworten.

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

Sie können Ihre Dia-Bewegung durch

erfassen

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

Verwendung translated.owl.carousel für nach Schieber

bewegt

eine ID zu Ihrem Image-Tag Geben Sie erhalten dann die aktive Bildquelle Schieber und auf <img/>

z.B.

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

Hier ist die Demo https://jsfiddle.net/566j4jsf/