title: How to show a little part of the second item of my owl-carousel?
body: <p>I work on the developpment of a mobile first website.<br />
  So, on mobile device I only show one item of my owl-carousel but I want to show just a little part of the second item to instil at the user that's a slider but I can't.<br />
  I allready do this :<br />
  <a href="https://i.stack.imgur.com/VbZ7d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VbZ7d.png" alt="Carousel operational"></a><br />
  And that's the code :<br /></p>
  
  <pre><code>//JS
  $(document).ready(function(){
    $('.owl-carousel').owlCarousel({
      loop:false,
      margin:1,
      nav:false,
      dots:true,
      responsive:{
          0:{
              items:1
          },
          600:{
              items:3
          },
          1000:{
              items:5
          }
      }
    });
  });
  
  //CSS
  #scrollerParent {
      width: 718px;
      position: absolute;
      top: 295px;
      left: 36px;
  }
  
  #articles-scroll {
      width: 718px;
  }
  
  .article {
      background-color: #FFFFFF;
      width: 342px;
      height: 629.27px;
  }
  
  .article img {
      width: 342px;
  }
  
  .titreArticle {
      margin: 0;
      position: absolute;
      top: 230.07px;
      left: 23.3px;
      color: #20335D;
      font-size: 20px;
      font-weight: bold;
      line-height: 30px;
  }
  
  .corpsArticle {
      margin: 0;
      position: absolute;
      top: 366.07px;
      left: 23.3px;
      color: #888888;
      font-weight: normal;
      font-size: 18px;
      line-height: 30px;
  }
  
  .article span {
      position: absolute;
      top: 563.47px;
      left: 23.3px;
      font-size: 14px;
      color: #888888;
      line-height: 15px;
  }
  </code></pre>
  
  <p>This first version is operationnal, it work, I can slide, but I want to show a little part of the second item like this version :<br />
  <a href="https://i.stack.imgur.com/ZMbl5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZMbl5.png" alt="Carousel no operational"></a><br />
  To get it I just change :<br /></p>
  
  <pre><code>$(document).ready(function(){
    $('.owl-carousel').owlCarousel({
      loop:false,
      margin:1,
      nav:false,
      dots:true,
      responsive:{
          0:{
              items:2 //I just change this
          },
          600:{
              items:3
          },
          1000:{
              items:5
          }
      }
    });
  });
  </code></pre>
  
  <p>But that's not operational. When I try to slide, I'm stuck on the first item. That's slide but it going back on the first item instead of staying on the second.<br />
  I think the JS/jQuery of my first version is good but maybe the CSS is'nt.<br />
  I also know we can modify the CSS with some jQuery code but I have no idea how.<br />
  Thank you for your help</p>