A Functioning Carousel with Tab Bar

[Woody Deck]

I have been trying to get a tab bar to link to specific pages in a carousel and can’t get it to work. I came across the exact question on stack, but nobody answered the poster. https://stackoverflow.com/questions/45417942/onsen-ui-tabbar-carousel-combine He provided codepens to illustrate.

I also saw some comments in a thread relating to a workaround with:

<ons-carousel-item class="someClass" >
    <ons-navigator id="carouselPage7.html" > </ons-navigator>
     <div>
       The content.
     </div>
   </ons-carousel-item>

But this didn’t work. Any advice?

[Woody Deck]

I’m also getting this in console when page a tab is selected:

ons-tab.js:370 Uncaught (in promise) Error: Page was not provided to <ons-tab> index 2
    at HTMLElement._loadPageElement (ons-tab.js:370)
    at index.js:426
    at Promise (<anonymous>)
    at HTMLElement.setActiveTab (index.js:425)
    at HTMLElement._onClick (ons-tab.js:322)
    at FastClick.sendClick (fastclick.js:308)
    at FastClick.onTouchEnd (fastclick.js:612)
    at HTMLBodyElement.<anonymous> (fastclick.js:111)

[Woody Deck]

The console errors resolved by defining the page for each tab. I still can’t link to individual pages from the tab.

ons.ready(function() {
    var carousel = document.addEventListener('postchange', function(event) {
    console.log('Changed to ' + event.activeIndex)
  });

This still logs as undefined and like the OP of this problem, I can’t figure out why it doesn’t log inside a template.

Update: The postchange only fires when you slide. So the tabs behave nonsensically. They won’t work at all until you actually change the carousel page, and then it tabs all revert to the last page you scrolled from. It’s a weird behavior. I’m sure the event listener function needs to be replaced with hard coded parameters.

Update 2: It seems the tab bar doesn’t like something. Buttons work with a function like this:

 var tab1 = function() {
  var carousel = document.getElementById('carousel');
  carousel.setActiveIndex(0);
}; 

Just not tabs.

[Woody Deck]

Code where everything works, but it throws the ons-tab.js:370 error above in console:

<ons-tabbar position="top" id="tabbar">

  <ons-tab  page="carousel.html" onclick="document.getElementById('carousel').setActiveIndex(0);"  label="Home" icon="ion-home" active></ons-tab>
  <ons-tab  onclick="document.getElementById('carousel').setActiveIndex(1);" label="About" icon="ion-android-people" ></ons-tab>
  <ons-tab  onclick="document.getElementById('carousel').setActiveIndex(2);"  label="FAQ" icon="ion-speakerphone" ></ons-tab>
  <ons-tab  onclick="document.getElementById('carousel').setActiveIndex(3);"  label="Privacy" icon="ion-lock-combination" ></ons-tab>

</ons-tabbar>

Code where the ons-tab.js:370 error is resolved, but variables on the page instantiate four times and nav is weirdly broken:

<ons-tabbar position="top" id="tabbar">

  <ons-tab  page="carousel.html" onclick="document.getElementById('carousel').setActiveIndex(0);"  label="Home" icon="ion-home" active></ons-tab>
  <ons-tab  page="carousel.html" onclick="document.getElementById('carousel').setActiveIndex(1);" label="About" icon="ion-android-people" ></ons-tab>
  <ons-tab  page="carousel.html" onclick="document.getElementById('carousel').setActiveIndex(2);"  label="FAQ" icon="ion-speakerphone" ></ons-tab>
  <ons-tab  page="carousel.html" onclick="document.getElementById('carousel').setActiveIndex(3);"  label="Privacy" icon="ion-lock-combination" ></ons-tab>

</ons-tabbar>

The page attribute should only be used once it seems, but not using it causes an error. Using a toolbar also doesn’t work around the problem, even if you can call a function, because a toolbar doesn’t have a page attribute, so you can’t call the carousel template.

Leaving it at this for tonight.

[Woody Deck]

You do in fact need a page declared for every ons-tab, but it shouldn’t be the same one. The tab functionality isn’t compatible with the carousel.

The only workaround I can think of is to make four duplicate carousels, and then you could fake it as you can link to one page just fine as long as the template name is different.

[Fran Diox]

@Woody-Deck Hey! I will start working on a sliding tab bar from next week. It will be hopefully finished in a few weeks so mixing carousel+tabbar won’t be necessary anymore :+1: