The active item should be in the middle of Owl Carousel

I have a problem with my owl-carousel. Everything works fine but the active item is the first one on the page not the middle one (the colored is the active one). You can see this in the following screenshot.

Screenshot of owl-caousel

I would like to have the middle item always be the active item.

My JQuery code :

jQuery(".owl-carousel").owlCarousel({ items:3, loop:true, nav:true, responsive:{ 0:{ items:1, stagePadding: 450 }, 600:{ items:1, stagePadding: 450 }, 1000:{ items:1, stagePadding: 450 } } }); 

I found something like this but it doesn work:

jQuery(".owl-carousel").owlCarousel({ items:3, loop:true, nav:true, // THIS IS THE NEW PART afterAction: function(el){ //remove class active this .$owlItems .removeClass('active') //add class active this .$owlItems //owl internal $ object containing items .eq(this.currentItem + 1) .addClass('active') } // END NEW PART responsive:{ 0:{ items:1, stagePadding: 450 }, 600:{ items:1, stagePadding: 450 }, 1000:{ items:1, stagePadding: 450 } } }); 
1

1 Answer

Owl Carousel adds the .active class to all visible items, not only to one of them.

But when you use the center option, only the central item gets the .center class.

Look at this demo: https://codepen.io/glebkema/pen/Xjryjd

$('.owl-carousel').owlCarousel({ autoplay: true, center: true, loop: true, nav: true, });
.owl-item.active > div:after { content: 'active'; } .owl-item.center > div:after { content: 'center'; } .owl-item.active.center > div:after { content: 'active center'; } .owl-item > div:after { font-family: sans-serif; font-size: 24px; font-weight: bold; }
<div class="owl-carousel owl-theme"> <div><img src="https://via.placeholder.com/300x200/936/fff/?text=1" alt=""></div> <div><img src="https://via.placeholder.com/300x200/693/fff/?text=2" alt=""></div> <div><img src="https://via.placeholder.com/300x200/369/fff/?text=3" alt=""></div> <div><img src="https://via.placeholder.com/300x200/f63/fff/?text=4" alt=""></div> </div> <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"> <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>

PS You can simplify your code.

items:3, responsive:{ 0:{ items:1, stagePadding: 450 }, 600:{ items:1, stagePadding: 450 }, 1000:{ items:1, stagePadding: 450 } 

is equivalent to

items:1, stagePadding: 450, 

PPS. 450 is a very huge for the stagePadding option on a narrow screen.

8

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJoanBraG1%2BeX6OrZ%2BeZZGYwarCxGagrZ2dYsCpu9Slm2aalWK2r3nToZxmpZmZsa2xjKidZqenoXqkrdGorKydnA%3D%3D