猫头鹰旋转木马改变图像答案

【问题标题】：Owl-Carousel changing image猫头鹰旋转木马改变图像
【发布时间】：2017-10-18 06:50:36
【问题描述】：

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

提前感谢所有花时间回答问题的人。

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

【问题讨论】：

标签： javascript jquery css twitter-bootstrap owl-carousel

【解决方案1】：

您可以通过

检测您的滑动移动

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

在滑块移动后使用translated.owl.carousel

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

【讨论】：