Question

是否可以根据猫头鹰轮播中的当前幻灯片更改图像？
我知道猫头鹰旋转木马里面有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();
});

Answer 1

您可以通过

检测幻灯片的移动

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

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

为您的图片代码添加ID，然后获取有效的滑块图片来源并设置为<img/>

e.g。

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/

猫头鹰 - 旋转木马改变图像

1 个答案: