javascript - Owl Carousel 改变形象

Question

是否可以根据 Owl Carousel 中的当前幻灯片更改图像？
我知道有 events在 Owl Carousel 中，但我没有找到我想要的东西。

预先感谢所有花时间回答问题的人。

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

use translated.owl.carousel for after slider moved

为您的图像标签提供一个 id，然后获取事件 slider 图像源并设置为 <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/