更改居中图像猫头鹰轮播的大小

如何解决更改居中图像猫头鹰轮播的大小

我正在尝试使用 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);
}

解决方法

在 owlCarousel 配置中制作 center: true。

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>