Change size of centered image owl carousel

user_13542396 0
Viewed 3314

I'm trying to use owl carousel jquery to make a responsive simple slider with 5 items and I want the middle image to be always bigger than the others. I've searched and tried to make this work from another questions in here, but it keeps not working for me.

Here's the code:

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

And what I added in owl.carousel.css:

.owl-item.active {
    -webkit-transform: scale(1.8);
    transform: scale(1.8);
}
owl-carousel css
1 Answers

Make center: true in owlCarousel configuration.

CSS properties to make bigger.

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

}

Code below :

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

user_123528690
Related