title: How to add space in carousel slider and only show 3 images
body: <p>thanks to the following post, I was able to add owl carousel slider onto my shopify store.</p>
  
  <p><a href="https://stackoverflow.com/questions/24904146/owl-carousel-navigation-center">owl carousel, navigation center</a></p>
  
  <p>I followed the code within codepen and managed to display 5 images and also have the navigation at the side as required. The CSS code that i have used is the following:</p>
  
  <p><a href="http://codepen.io/anon/pen/jJAHL" rel="nofollow noreferrer">http://codepen.io/anon/pen/jJAHL</a> </p>
  
  <p>/*
  *   Owl Carousel Owl Demo Theme 
  *   v1.23
  */</p>
  
  <pre><code>.owl-theme .owl-controls{
      margin-top: 10px;
      text-align: center;
  }
  
  /* Styling Next and Prev buttons */
  
  .owl-theme .owl-controls .owl-buttons div{
      color: #FFF;
      display: inline-block;
      zoom: 1;
      *display: inline;/*IE7 life-saver */
      margin: 5px;
      padding: 3px 10px;
      font-size: 12px;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius: 30px;
      background: #869791;
      filter: Alpha(Opacity=50);/*IE7 fix*/
      opacity: 0.5;
  }
  /* Clickable class fix problem with hover on touch devices */
  /* Use it for non-touch hover action */
  .owl-theme .owl-controls.clickable .owl-buttons div:hover{
      filter: Alpha(Opacity=100);/*IE7 fix*/
      opacity: 1;
      text-decoration: none;
  }
  
  /* Styling Pagination*/
  
  .owl-theme .owl-controls .owl-page{
      display: inline-block;
      zoom: 1;
      *display: inline;/*IE7 life-saver */
  }
  .owl-theme .owl-controls .owl-page span{
      display: block;
      width: 12px;
      height: 12px;
      margin: 5px 7px;
      filter: Alpha(Opacity=50);/*IE7 fix*/
      opacity: 0.5;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
      background: #869791;
  }
  
  .owl-theme .owl-controls .owl-page.active span,
  .owl-theme .owl-controls.clickable .owl-page:hover span{
      filter: Alpha(Opacity=100);/*IE7 fix*/
      opacity: 1;
  }
  
  /* If PaginationNumbers is true */
  
  .owl-theme .owl-controls .owl-page span.owl-numbers{
      height: auto;
      width: auto;
      color: #FFF;
      padding: 2px 10px;
      font-size: 12px;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius: 30px;
  }
  
  /* preloading images */
  .owl-item.loading{
      min-height: 150px;
      background: url(AjaxLoader.gif) no-repeat center center
  }
  
  #owl-demo .owl-item &gt; div img {
      display: block;
      width: 100%;
      height: auto;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      margin-bottom:4px;
  }
  
  #owl-demo .owl-item &gt; div{
    background : #42bdc2;
    text-align: center;
    padding:50px 0px;
    margin:3px;
    color: white;
    font-size:32px;
    border:1px white;
  }
  
  .wrapper-with-margin{
    margin:0px 50px;
  }
  
  
  .owl-theme .owl-controls .owl-buttons div {
    position: absolute;
  }
  
  .owl-theme .owl-controls .owl-buttons .owl-prev{
    left: -45px;
    top: 55px; 
  }
  
  .owl-theme .owl-controls .owl-buttons .owl-next{
    right: -45px;
    top: 55px;
  }
  .one {
    height: 200px;
  }
  </code></pre>
  
  <p>The only change that i would like to make is to only show 3 images but i am not sure what part of the code to change as i don't want it to affect the sizes of the image as when i have tried to add a right padding to #owl-demo .owl-item > div it reduces the size of the box.</p>
  
  <p>If somebody could please advise would really appreciate it.</p>
  
  <p>Thanks in advance</p>