更改居中图像猫头鹰旋转木马的大小

我试图使用owl carousel jquery来制作一个响应简单的滑块，有5个项目，我希望中间的图像总是比其他的大。我已经搜索并试图使这个工作从另一个问题在这里，但它一直不适合我。

代码如下:

<div class="owl-carousel ">
<div class="item"><img src="assets/img/square-icon.jpg" alt="" style="max-width:400px"></div>
<div class="item"><img src="assets/img/square-icon2.jpg" alt="" style="max-width:400px"></div>
<div class="item"><img src="assets/img/square-icon.jpg" alt="" style="max-width:400px"></div>
<div class="item"><img src="assets/img/square-icon2.jpg" alt="" style="max-width:400px"></div>
<div class="item"><img src="assets/img/square-icon.jpg" alt="" style="max-width:400px"> </div>
<div class="item"><img src="assets/img/square-icon2.jpg" alt="" style="max-width:400px"></div>
<div class="item"><img src="assets/img/square-icon.jpg" alt="" style="max-width:400px"></div>
<div class="item"><img src="assets/img/square-icon2.jpg" alt="" style="max-width:400px"></div>
</div>
<script type="text/javascript">

$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:5,
nav:true,
loop:false
}
}
})
</script>

我在owl。carousel。css:

中添加的内容

.owl-item.active {
-webkit-transform: scale(1.8);
transform: scale(1.8);
}

让center: true进入owlCarousel配置

让CSS属性变大

.owl-item.active.center {
-webkit-transform: scale(1.8);
transform: scale(1.8);

}

下面代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" />
<style>

.owl-item.active.center {
-webkit-transform: scale(1.8);
transform: scale(1.8);
}
.item{
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>

<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://dummyimage.com/vga" alt="">
</div>
<div class="item">
<img src="https://dummyimage.com/vga" alt="">
</div>
<div class="item">
<img src="https://dummyimage.com/vga" alt="">
</div>
<div class="item">
<img src="https://dummyimage.com/vga" alt="">
</div>
<div class="item">
<img src="https://dummyimage.com/vga" alt="">
</div>



</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>

<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop:true,
autoplay: true,
margin:10,
center: true,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:5,
nav:true,
loop:true
}
}
})
</script>
</body>
</html>

相关内容

最新更新

热门标签：