How do I add classes to items in Owl Carousel 2?

Question

My goal is to make a carousel that looks like this:

In case you don't know what you're looking at, there are 5 images/items but only the center one is displayed in its full size. The images next to the center one are smaller, and the outer ones smaller still.

I've achieved this in the first version of Owl Carousel but it doesn't support looping, which makes this design ridiculous (can't reach the side images...).

Here's how I did it:

var owl = $("#owl-demo");

owl.owlCarousel({
pagination: false,
lazyLoad: true,
itemsCustom: [
  [0, 3],
  [900, 5],
  [1400, 7],
],
afterAction: function(el){

.$owlItems
   .removeClass('active') //what I call the center class
   .removeClass('passive') //what I call the next-to-center class

   this
   .$owlItems

    .eq(this.currentItem + 2) //+ 2 is the center with 5 items
    .addClass('active')

    this
    .$owlItems

    .eq(this.currentItem + 1)
    .addClass('passive')

    this
    .$owlItems

    .eq(this.currentItem + 3)
    .addClass('passive')
  }

Just showing you the code for 5 items, but I used some if-clauses to get it working for 3 and 7 as well. The active class is just composed of width: 100% and the passive one width: 80%.

Does anyone know how to get the same result in Owl Carousel 2? I'm using _items instead of $owlItems but I don't know if that's correct. There is no afterAction and the events/callbacks don't seem to work as they should in v2.

Answer 1

You can do it this way:

$(function(){
    $('.loop').owlCarousel({
        center: true,
        items:5,
        loop:true,
        margin:10
    });

    $('.loop').on('translate.owl.carousel', function(e){
        idx = e.item.index;
        $('.owl-item.big').removeClass('big');
        $('.owl-item.medium').removeClass('medium');
        $('.owl-item').eq(idx).addClass('big');
        $('.owl-item').eq(idx-1).addClass('medium');
        $('.owl-item').eq(idx+1).addClass('medium');
    });
}); 

Listening to the event of your choice

List of available events here

In the demo, I just add the class big to the main item, and the class medium to the previous and next one. From that you can play with whichever css property you want.

LIVE DEMO

---

NOTE:

You could also just play with plugin classes, .active and .center (or you can also define your own, as you can see here: custom classes