我已经看到了很多与此主题有关的问题,但是没有一个问题可以解决我的问题,所以我不认为这会是“重复的”。
所以,我正在尝试放大Owl Carousel 2中间的项目 先前问题提供的答案不能解决我的问题,因此这是我的代码
<div class="owl-carousel ftco-owl">
<div class="item" style="text-align:center;">
<div class="media d-block mb-4 text-center ftco-media ftco-animate border-0" style="background-image:url(images/events/1.png);text-align:center;">
<div class="media-body p-md-5 p-4" style="text-align:center;">
<div style="background:rgba(245,245,245,0.9);padding:15px;height:350px;text-align:center;">
<div style="border-style:solid;border-width:1px;border-color:#af6e4c;padding-top:150px;height:315px;text-align:center;">
<h5 style="color:#af6e4c">Cocktail</h5>
</div>
</div>
</div>
</div>
</div>
还有其他项目,我只是复制了一个。
我的JS代码
var carousel = function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
stagePadding: 5,
center:true,
navText: ['<span class="icon-chevron-left">', '<span class="icon-chevron-right">'],
responsive:{
0:{
items: 1
},
600:{
items: 2
},
1000:{
items: 3
}
}
});
};
carousel();
我的CSS无法正常工作
.owl-item.active.center{transform: scale(1.3);}
谢谢您的帮助