title: Owl Carousel 2 - Center and overlay
body: <p>I want a three-item-carousel with the middle item center in one background color (later on a background image in color) and the left + right item in different color (later on imagebackgrounds with a greyscale-filter).Like this one for owl 1 at <a href="http://codepen.io/OwlFonk/pen/dpjhB" rel="nofollow">http://codepen.io/OwlFonk/pen/dpjhB</a>    But I want to use Owl 2.</p>
  
  <p>I can't seem to single out the current item?! My carousel keeps 'painting' the middle and right... What am I doing wrong?! Getting frustrating!!  =) </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;!-- head --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="msapplication-tap-highlight" content="no" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
  
      &lt;title&gt;Owl 2 - Color Overlay&lt;/title&gt;
  
      &lt;!-- Stylesheets --&gt;
      &lt;link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"&gt;
      &lt;link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"&gt;
      &lt;!--&lt;link href="owl.carousel.min.css" rel="stylesheet"&gt;--&gt;
      &lt;!--&lt;link href="owl.theme.default.min.css" rel="stylesheet"&gt;--&gt;
  
      &lt;!-- javascript --&gt;
      &lt;script src="http://www.owlcarousel.owlgraphic.com/assets/vendors/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"&gt;&lt;/script&gt;
      &lt;!--&lt;script src="jquery-2.1.1.min.js"&gt;&lt;/script&gt;--&gt;
      &lt;!--&lt;script src="owl.carousel-2.0.0.js"&gt;&lt;/script&gt;--&gt;
  
  &lt;style&gt;
  .content{
      position:absolute; 
      background-color: rgba(255, 255, 255, 0.7);
      filter: alpha(opacity=70);
      padding:20px;
      width:auto;
      left:5%;
      bottom:0%;
      }
  .header{
      font-family:Arial;
      color:#c70c6f; 
      font-size:2em;
      }
  .text{
      font-family:Arial;
      color:#000; 
      font-size:1em;
      }
  &lt;!--preloading images--&gt;
  .owl-item.loading {
      min-height: 150px;
      background: url(AjaxLoader.gif) no-repeat center center;
  }   
  #owl-demo .owl-item &gt; div img {
    margin: 0;
    height:100px;
    background: #cccccc;
  }
  #owl-demo .owl-item &gt; div {
    margin: 0;
    height:100px;
    background: #66cc22;
  }
  #owl-demo .owl-item.active &gt; div {
    margin: 0;
    height:100px;
    background: #668899;
  }
  &lt;/style&gt;
  
    &lt;/head&gt;
    &lt;body style="padding: 0; margin: 0;"&gt;
  
      &lt;!-- body --&gt;
          &lt;div id="demo" &gt;
  
            &lt;div id="owl-demo" class="owl-carousel" style="width:100%"&gt;
  
              &lt;div  style="position:relative; width:960px;height:340px;margin-left:0px;margin-right:0px;"&gt;
                  &lt;div class="content" &gt;
                      &lt;span class="header"&gt;Header 1&lt;/span&gt;&lt;br&gt;
                      &lt;span class="text"&gt;Lorem ipsum and so on...&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div style="position:relative; width:960px;height:340px;margin-left:0px;margin-right:0px;"&gt;
                      &lt;div class="content" &gt;
                      &lt;span class="header"&gt;Header 2&lt;/span&gt;&lt;br&gt;
                      &lt;span class="text"&gt;Lorem ipsum and so on...&lt;/span&gt;
                  &lt;/div&gt;  
              &lt;/div&gt;
              &lt;div style="position:relative; width:960px;height:340px;margin-left:0px;margin-right:0px;"&gt;
                  &lt;div class="content" &gt;
                      &lt;span class="header"&gt;Header 3&lt;/span&gt;&lt;br&gt;
                      &lt;span class="text"&gt;Lorem ipsum and so on...&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div style="position:relative; width:960px;height:340px;margin-left:0px;margin-right:0px;"&gt;
                  &lt;div class="content" &gt;
                      &lt;span class="header"&gt;Header 4&lt;/span&gt;&lt;br&gt;
                      &lt;span class="text"&gt;Lorem ipsum and so on...&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div style="position:relative; width:960px;height:340px;margin-left:0px;margin-right:0px;"&gt;
                  &lt;div class="content" &gt;
                      &lt;span class="header"&gt;Header 5&lt;/span&gt;&lt;br&gt;
                      &lt;span class="text"&gt;Lorem ipsum and so on...&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div style="position:relative; width:960px;height:340px;margin-left:0px;margin-right:0px;"&gt;
                  &lt;div class="content" &gt;
                      &lt;span class="header"&gt;Header 6&lt;/span&gt;&lt;br&gt;
                      &lt;span class="text"&gt;Lorem ipsum and so on...&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;script&gt;
          var owl = $('.owl-carousel');   
          owl.owlCarousel({
  
          width:960,
          margin:5,
          dots:false,
          loop: true,
          autoplay:true,
          autoplayTimeout:3000,
          autoplayHoverPause:true,
          autoWidth:true,
  
          afterAction: function(el){  
              //remove class active
              this
              .$owlItems  
              .removeClass('active')
  
              //add class active
              this
              .$owlItems 
              .eq(this.currentItem + 1)
              .addClass('active')
          },
  
          //responsive
          responsiveClass:true,
          responsive:{
              0:{
                  items:1,
                  center:false,
                  singleItem:true,
                  itemsScaleUp:true,
              },
              960:{
                  items:3,
                  center:true,
                  singleItem:false,
                  itemsScaleUp:false,
              }
          }
      })
      &lt;/script&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>