Carousel + Tabbar navigation need help

Yohann3396

Hi,

I try to combine Tabbar + Carousel for a drag effect

I have a little problem ;

When I add the Tabbar in the same page as the carousel, the carousel swipe does not work.

And when I put the tabbar in a different page of the carousel the swipe works well but I can not retrieve the current index (OnPostChange)

Someone has the solution please?

Thank you

I put the two codes that do not work below

https://codepen.io/yohann3396/pen/brppxY

First :


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  <script>ons.platform.select('android');</script>
  <script src="https://unpkg.com/onsenui@2.5.1/js/angular-onsenui.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
ons.bootstrap();
ons.ready(function() {

alert('test');
carousel.on('postchange', function(event) {
  var test = carousel.getActiveIndex();
alert(test);
    });

    
});




</script>

</head>
<body>


<ons-page>
 

<ons-tabbar position="top" id="tabbarAccueil">
  <ons-tab  page="carousel.html" onclick="document.getElementById('carouselAccueil').setActiveIndex(0);"  label="Calories" icon="ion-android-restaurant" active></ons-tab>
  <ons-tab   onclick="document.getElementById('carouselAccueil').setActiveIndex(1);" label="Sport" icon="ion-android-bicycle" ></ons-tab>
  <ons-tab  onclick="document.getElementById('carouselAccueil').setActiveIndex(2);"  label="Eau" icon="ion-android-bar" ></ons-tab>
  <ons-tab   onclick="document.getElementById('carouselAccueil').setActiveIndex(3);"  label="Menu" icon="ion-android-menu" ></ons-tab>
  </ons-tab>
</ons-tabbar>





 <ons-carousel var="carousel" id="carouselAccueil"  fullscreen swipeable auto-scroll overscrollable>
    

<ons-carousel-item style="background-color: #085078;">
   
 <ons-navigator page="sport.html"> <ons-navigator>

  </ons-carousel-item>
  



  <ons-carousel-item style="background-color: #373B44;">
   
   <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        DARK
      </div>
  
  </ons-carousel-item>
    <ons-carousel-item style="background-color: #D38312;">
   

   <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
  

      ORANGE
      </div>
    </ons-carousel-item>
  </ons-carousel>




</ons-page>




</body>
</html>

https://codepen.io/yohann3396/pen/jLqqdK
Second :


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  <script>ons.platform.select('android');</script>
  <script src="https://unpkg.com/onsenui@2.5.1/js/angular-onsenui.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
ons.bootstrap();
ons.ready(function() {

alert('test');
carousel.on('postchange', function(event) {
  var test = carousel.getActiveIndex();
alert(test);
    });

    
});




</script>

</head>
<body>


<ons-page>
 

<ons-tabbar position="top" id="tabbarAccueil">
  <ons-tab  page="carousel.html" onclick="document.getElementById('carouselAccueil').setActiveIndex(0);"  label="Calories" icon="ion-android-restaurant" active></ons-tab>
  <ons-tab   onclick="document.getElementById('carouselAccueil').setActiveIndex(1);" label="Sport" icon="ion-android-bicycle" ></ons-tab>
  <ons-tab  onclick="document.getElementById('carouselAccueil').setActiveIndex(2);"  label="Eau" icon="ion-android-bar" ></ons-tab>
  <ons-tab   onclick="document.getElementById('carouselAccueil').setActiveIndex(3);"  label="Menu" icon="ion-android-menu" ></ons-tab>
  </ons-tab>
</ons-tabbar>

</ons-page>


<template id="carousel.html">
  <ons-page>

 <ons-carousel var="carousel" id="carouselAccueil"  fullscreen swipeable auto-scroll overscrollable>
    

<ons-carousel-item style="background-color: #085078;">
   
 <ons-navigator page="sport.html"> <ons-navigator>

  </ons-carousel-item>
  



  <ons-carousel-item style="background-color: #373B44;">
   
   <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        DARK
      </div>
  
  </ons-carousel-item>
    <ons-carousel-item style="background-color: #D38312;">
   

   <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
  

      ORANGE
      </div>
    </ons-carousel-item>
  </ons-carousel>







</ons-page>
</template>








</body>
</html>

Fran Diox

@Yohann3396 This is a feature we plan to implement soon in the core. In the meantime, you can use the same structure as in your first example but using CSS versions of the tabbar instead of the custom element ons-tabbar.

In your second example you have a timing issue. You are trying to access the carousel when it’s not in the DOM yet, so you could simply do that in a carousel controller. However, you’d still have errors when you click on tabs that don’t have a page attribute.

Yohann3396

@Fran-Diox

Thanks ! It work ! :)

Just a little question, i cant scroll on my carousel

 <ons-carousel var="carouselAccueil" id="carouselAccueil"   fullscreen swipeable auto-scroll overscrollable>

How can i fix this ?

:)

Fran Diox

@Yohann3396 Normal CSS for that… set overflow: auto in the carousel items.

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Carousel + Tabbar navigation need help