1

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

KNIGHT MAHAJAN
  • 503
  • 1
  • 5
  • 12
  • Could u please provide a https://stackoverflow.com/help/mcve so we can actually see the problem? – Fabian S. Jun 14 '18 at 05:56
  • @FabianSchöner are you recommending me to include screenshots of the output or some other extra needed code ? – KNIGHT MAHAJAN Jun 14 '18 at 06:24
  • Generally i would recommend adding a runnable fiddle in the question so the problem actually becomes visible as its hard to imaging (at least for me) by the given description. Would be much clearer if we could actually see it. – Fabian S. Jun 14 '18 at 06:26
  • @FabianSchöner I have added the screenshot. – KNIGHT MAHAJAN Jun 14 '18 at 06:56
  • @KNIGHTMAHAJAN could you add a Fiddle (using JSFiddle or Codepen or something similar) containing your actual code so we can help with your specific problem? A screenshot can only help so much. – James Whiteley Jun 14 '18 at 10:56
  • @FabrinSchoner please checkout the link : https://jsfiddle.net/knightmahajan/cje930xd/8/#&togetherjs=oFp9EbjJTc – KNIGHT MAHAJAN Jun 16 '18 at 21:49
  • However, I am unable to upload my entire project including core libraries. Hence you will have to refer the screenshot only for opportunities. – KNIGHT MAHAJAN Jun 16 '18 at 21:50

0 Answers0