title: The active item should be in the middle of Owl Carousel
body: <p>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. </p>
  
  <p><img src="https://i.stack.imgur.com/9QzIz.png" alt="Screenshot of owl-caousel"></p>
  
  <p>I would like to have the middle item always be the active item.</p>
  
  <p>My JQuery code :</p>
  
  <pre><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
          }
      }
  });
  </code></pre>
  
  <p>I found something like this but it doesn work:</p>
  
  <pre><code>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
          }
      }
  });
  </code></pre>