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

【问题标题】：Change size of centered image owl carousel更改居中图像猫头鹰轮播的大小
【发布时间】：2021-02-05 16:31:31
【问题描述】：

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

【问题讨论】：

标签： css owl-carousel

【解决方案1】：

在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>

【讨论】：