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.
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 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.
$('.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> <div><img src="" alt=""></div> <div><img src="" alt=""></div> <div><img src="" alt=""></div> <div><img src="" alt=""></div> </div> <link rel="stylesheet" href=""> <link rel="stylesheet" href=""> <script src=""></script> <script src=""></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.
