Carousel + Tabbar navigation need help



  • 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>
    

  • Onsen UI

    @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.



  • @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 ?

    :)


  • Onsen UI

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


Log in to reply