Onsen UI Tutorial Page

Question

enter image description here

I'd like to do the above app Tutorial effect using Onsen UI. However, in the Page Patterns of Onsen UI, I didn't see anything similar. Could someone shed some light on this?

Much appreciated.

Answer 1

I think what you're looking for is a carousel. You can make one using the <ons-carousel> component.

In this case you want to have a swipeable fullscreen carousel so you can define it like this:

<ons-carousel swipeable overscrollable auto-scroll fullscreen>
 <ons-carousel-item>
 Content #1
 </ons-carousel-item>
 <ons-carousel-item>
 Content #2
 </ons-carousel-item>
</ons-carousel>

Here is a simple example of a fullscreen carousel: http://codepen.io/onsen/pen/xbbzOQ

Please also take a look at the docs: http://onsen.io/reference/ons-carousel.html

If you want bullets, you can use the carousel.getActiveCarouselItemIndex() in order to get the current active element.

<ons-carousel-cover>
 <div class="bullets">
 <span 
 ng-repeat="idx in indices"
 ng-class="{'active': idx === carousel.getActiveCarouselItemIndex()}">
 •
 </span>
 </div>
</ons-carousel-cover>

You also need to trigger a digest event to make Angular understand that something changed.

This is the code: http://codepen.io/argelius/pen/RWomrz

• Paul: Thanks a lot, Andreas! btw, could you give me a hint about the progress bar (several white spots) when swiping the carousel? Much appreciated.
• Andreas Argelius: Do you mean something like this? codepen.io/argelius/pen/RWomrz I will add it to the answer.
• Paul: OMG, this is it! You really save my day!