title: Show half of the other item on Owl Carousel
body: <p>Im trying to display part of the other item on the left side and display full item on the right side using owl carousel. </p>
  
  <p>Per each item I have a banner image and the text, which are split using the bootstrap grid columns. </p>
  
  <p>I was able to achieve the partial display using stagepadding: 200
  and to display the partial image only on the left side I used right:-200px in css on .owl-stage class. </p>
  
  <p>Now, the problem is that on the left side I need to display the banner image of that partial slide, not the text... </p>
  
  <p>owl slider has the active class, so with css I tried to hide that text column when it is NOT active... it worked, but all I see is empty space on the left side, it did not push the banner image automatically. </p>
  
  <p>Please view the screenshots
  What Im trying to achieve: <a href="https://imgur.com/MlaN5t5" rel="nofollow noreferrer">http://imgur.com/MlaN5t5</a>
  What I get: <a href="https://imgur.com/z1UG6lK" rel="nofollow noreferrer">http://imgur.com/z1UG6lK</a></p>
  
  <p>that white space is filled with text column actually, but is hidden with css. I need the banner image from the left to take over that whole space when its partially displayed, but when that specific slide item is active, then I will show both image and text as usual. </p>
  
  <p>This is my js script. </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>   jQuery(document).ready(function($) {
      $('.owl-carousel').owlCarousel({
       center: true, 
       autoplay:false, 
       autoplayTimeout:5000,
       autoplayHoverPause:false,
       stagePadding: 150, 
       items:1,           
       loop:true,     
       margin:0,      
       responsive:{
        600:{
         items:1 
        }
       },
       onInitialized : function(){
        if($('.owl-item').first().hasClass('active'))
         $('.owl-prev').hide();
        else
         $('.owl-prev').show();
       } 
      }); 
     }); </code></pre>
  </div>
  </div>
  </p>