0

I'd like to combine a tabbar with carrousel, so that I can navigate between tabs not only by tapping the tabbar but also by swiping like the way it works for a carousel.

I found that this codepen (http://codepen.io/frankdiox/pen/EVpNVg) (as listed in this answer (https://stackoverflow.com/a/33486827/6857215) almost does what I want, except that by just using the CSS style of a tabbar, I'm losing the automatic material-design on android which is not what I want.

I would love to have a solution that contains just something like this:

<ons-page>
 <ons-carousel swipeable auto-scroll fullscreen id="carousel">
     <ons-carousel-item> Page one </ons-carousel-item>
     <ons-carousel-item> Page two </ons-carousel-item>
     <ons-carousel-item> Page three </ons-carousel-item>
 </ons-carousel>

 <ons-tabbar position="top">
     <ons-tab onclick="carousel.setActiveCarouselItemIndex(0)" active>One</ons-tab>
     <ons-tab onclick="carousel.setActiveCarouselItemIndex(1)">Two</ons-tab>
     <ons-tab onclick="carousel.setActiveCarouselItemIndex(2)">Three</ons-tab>
 </ons-tabbar>
</ons-page>

Since onsen ui 2 is out, I'd thought maybe someone has a neater solution for this than the old example?

Community
  • 1
  • 1
Wheelie
  • 15
  • 5
  • If you wrap the tab bar in a Gesture Detector, you then can detect a swipe and the direction, which will then let you call which way to change tabs. – Munsterlander Oct 07 '16 at 21:02
  • Thanks. However, that's also a compromise since the slide animation starts after the swipe action is completed, which is not as pretty as the how the carousel behaves. – Wheelie Oct 11 '16 at 08:28

0 Answers0