Show part of next and previous items with Owl Carousel 2.0

Question

I'm using Owl Carousel 2.0. 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:

I've been trying using just CSS (padding and margin negative with the owl-stage-outer) but obviously Javascript override them.

Here's my code so far:

$('.owl-carousel').owlCarousel({    loop: true,    margin: 10,    nav: true,    responsive: {      0: {        items: 1      },      600: {        items: 3      }    }  })

.owl-carousel .item h4 {    color: #FFF;    font-weight: 400;    margin-top: 0em;  }    .owl-carousel .item {    height: 10em;    background: #4DC7A0;    padding: 1em;  }    .wrapper {    width: 40em;  }

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />  <script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>    <div class="wrapper">    <div class="owl-carousel">      <div class="item">        <h4>1</h4>      </div>      <div class="item">        <h4>2</h4>      </div>      <div class="item">        <h4>3</h4>      </div>      <div class="item">        <h4>4</h4>      </div>      <div class="item">        <h4>5</h4>      </div>      <div class="item">        <h4>6</h4>      </div>      <div class="item">        <h4>7</h4>      </div>      <div class="item">        <h4>8</h4>      </div>      <div class="item">        <h4>9</h4>      </div>      <div class="item">        <h4>10</h4>      </div>      <div class="item">        <h4>11</h4>      </div>      <div class="item">        <h4>12</h4>      </div>    </div>

Answer 1

The easiest way to do this is by using stagePadding. Demo below:

$(function() {    $('.owl-carousel').owlCarousel({      margin: 10,      loop: true,      items: 1,      stagePadding: 100    });  });

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />  <script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>    <div class="owl-carousel">    <div class="item"><img src="//placehold.it/350x150&text=1" /></div>    <div class="item"><img src="//placehold.it/350x150&text=2" /></div>    <div class="item"><img src="//placehold.it/350x150&text=3" /></div>    <div class="item"><img src="//placehold.it/350x150&text=4" /></div>    <div class="item"><img src="//placehold.it/350x150&text=5" /></div>    <div class="item"><img src="//placehold.it/350x150&text=6" /></div>    <div class="item"><img src="//placehold.it/350x150&text=7" /></div>    <div class="item"><img src="//placehold.it/350x150&text=8" /></div>  </div>