title: How do I add classes to items in Owl Carousel 2?
body: <p>My goal is to make a carousel that looks like this:</p>
  
  <p><img src="https://i.imgur.com/c4xTgH5.jpg" alt="Carousel"></p>
  
  <p>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.</p>
  
  <p>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...).</p>
  
  <p>Here's how I did it:</p>
  
  <pre><code>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')
    }
  </code></pre>
  
  <p>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 <code>active</code> class is just composed of <code>width: 100%</code> and the <code>passive</code> one <code>width: 80%</code>.</p>
  
  <p>Does anyone know how to get the same result in Owl Carousel 2? I'm using <code>_items</code> instead of <code>$owlItems</code> but I don't know if that's correct. There is no <code>afterAction</code> and the events/callbacks don't seem to work as they should in v2.</p>