Unnecessary white spaces in ons-carousel-items

Question

I am new to Onsen UI and Monaca. I really like it a lot. I am trying to build a carousel with small images (say 6em x 6em). Using ons-carousl and ons-carousel-items, I am able to achieve it. However, there is a wide gap between consecutive images. Like only 1 small image in the visible screen. The next becomes visible only after I slide full screen. I have tried margins and all but in vain.

Please Help !

My code :-

<ons-carousel width="auto" swipeable auto-scroll auto-scroll-ratio="0.2" animation="ease-in" overscrollable class="carousel1">

    <ons-carousel-item>
       <img class="car1" src="./images/banner4.png" />
    </ons-carousel-item>

  <ons-carousel-item>
      <img class="car1  img-thumbnail" src="./images/banner4.png" />
  </ons-carousel-item>

  <ons-carousel-item>
      <img class="car1  img-thumbnail" src="./images/banner4.png" />
  </ons-carousel-item>

  <ons-carousel-item>
      <img class="car1  img-thumbnail" src="./images/banner4.png" />
  </ons-carousel-item>
</ons-carousel> 

Check out the Carousel below