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:
Note that this example assumes you have included the necessary CSS and JavaScript files for the Owl Carousel plugin.
