是否可以根据 Owl Carousel 中的当前幻灯片更改图像?
我知道有 events在 Owl Carousel 中,但我没有找到我想要的东西。
预先感谢所有花时间回答问题的人。
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();
});
最佳答案
您可以通过以下方式检测您的幻灯片移动
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);
})
关于javascript - Owl Carousel 改变形象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46804297/