How To Center Active Slider In The Owl Carousel?

Hiral Patodiya Apr 4, 2023 0 444

To center the active slider in the Owl Carousel, you can use a combination of CSS and JavaScript to dynamically adjust the margins and positions of the slides. Here’s an example:

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
  <style type="text/css">
    .slider {
        height: 10rem;
        background: #aad0d0;
        padding: 20px;
        color: #fff;
    }
  </style>
<body>
   <div class="owl-carousel  owl-theme">
   		<div class="slider"><h2>1</h2></div>
   		<div class="slider"><h2>2</h2></div>
   		<div class="slider"><h2>3</h2></div>
   		<div class="slider"><h2>4</h2></div>
  </div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script type="text/javascript">
  jQuery( document ).ready( function() {
    jQuery( '.owl-carousel' ).owlCarousel({
      loop:true,
      margin:10,
      autoplay:true,
      nav:true,
      responsive:{
          0:{
              items:1.5
          },
          
          1000:{
              items:3.5
          }
      }
    });
  });
</script>

OutPut: