title: Show part of next and previous items with Owl Carousel 2.0
body: <p>I'm using <a href="https://github.com/OwlFonk/OwlCarousel2" rel="noreferrer">Owl Carousel 2.0</a>. I would like to show one item, a half (or less) of the previous item (left side) and a half (or less) of the next item (right side). Just putting a part of them out on the right and on the left side:</p>
  
  <p><img src="https://i.stack.imgur.com/aFk4v.jpg" alt="enter image description here"></p>
  
  <p>I've been trying using just CSS (<code>padding</code> and <code>margin</code> negative with the <code>owl-stage-outer</code>) but obviously Javascript override them.</p>
  
  <p>Here's my code so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 3
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.owl-carousel .item h4 {
    color: #FFF;
    font-weight: 400;
    margin-top: 0em;
  }
  
  .owl-carousel .item {
    height: 10em;
    background: #4DC7A0;
    padding: 1em;
  }
  
  .wrapper {
    width: 40em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" /&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="wrapper"&gt;
    &lt;div class="owl-carousel"&gt;
      &lt;div class="item"&gt;
        &lt;h4&gt;1&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;h4&gt;2&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;h4&gt;3&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;h4&gt;4&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;h4&gt;5&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;h4&gt;6&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;h4&gt;7&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;h4&gt;8&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;h4&gt;9&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;h4&gt;10&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;h4&gt;11&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;h4&gt;12&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>