0

Using Owl Carousel, I am trying to add a class to the divs either side of the centered carousel item. The option 'center: true' applies the class 'center' to the middle item. I am then using the changed.owl.carousel event to add class 'center' to the prev and next divs. The event is firing and I can see the console log, but it is not adding the class to these neighbouring divs.

When I run the addclass functions outside of the changed.owl.carousel event, it adds the classes to the divs correctly but only once and will not repeat when the slides change.

Can anyone offer a solution?

I have prepared a jsfiddle which demonstrates the problem

And here is the js I am trying:

var owl;
jQuery(document).ready(function(){
  owl = $(".owl-carousel").owlCarousel({
    autoPlay: 3000,
    loop: true,
    items: 7,
    margin: 20,
    autoplay: true,
    stagePadding: 50,
    center: true
  });
  owl.on('changed.owl.carousel', function(e) {
    jQuery('.owl-item.center').prev().addClass("center");
    jQuery('.owl-item.center').next().addClass("center");
    console.log("fired!");
  });
});
Jalapeno Jack
  • 416
  • 7
  • 21
  • 1
    Adapting the answer from https://stackoverflow.com/questions/28900207/how-do-i-add-classes-to-items-in-owl-carousel-2?noredirect=1&lq=1#28903704, I've created the following fiddle: https://jsfiddle.net/k5wqsbn3/. Your code is not working because the plugin internally tries to remove/add classes to element in the same event. – andreivictor Mar 17 '19 at 18:37
  • Ah I could not find that question, thank you so much, that is very helpful and I can see where I was going wrong now. – Jalapeno Jack Mar 18 '19 at 00:48

0 Answers0