Active class in tabs with respect to carousel item



  • Below is my code. I am merging carousel with tabs.
    I want to respective tab should active when i swipe carousel.
    Now active class is working only on click of tabs.

    <ons-page>
    <ons-carousel swipeable overscrollable auto-scroll fullscreen id=“carousel” auto-scroll-ratio=“0.01”>
    <ons-carousel-item>
    Slide 1
    </ons-carousel-item>
    <ons-carousel-item>
    slide 2
    </ons-carousel-item>
    <ons-carousel-item>
    slide 3
    </ons-carousel-item>
    <ons-carousel-item>
    slide 4
    </ons-carousel-item>

                </ons-carousel>
    
    
                <div class="tab-bar" id="myTabbar">
                    <label class="tab-bar__item" onclick="carousel.setActiveIndex(0)">
                        <input type="radio" name="tab-bar-a" checked="checked">
                        <button class="tab-bar__button">
                            <i class="tab-bar__icon ion-stop"></i>
                            <div class="tab-bar__label">Overview</div>
                        </button>
                    </label>
    
                    <label class="tab-bar__item" onclick="carousel.setActiveIndex(1)">
                        <input type="radio" name="tab-bar-a">
                        <button class="tab-bar__button">
                            <i class="tab-bar__icon ion-record"></i>
                            <div class="tab-bar__label">Indices</div>
                        </button>
                    </label>
    
                    <label class="tab-bar__item" onclick="carousel.setActiveIndex(2)">
                        <input type="radio" name="tab-bar-a">
                        <button class="tab-bar__button">
                            <i class="tab-bar__icon ion-star"></i>
                            <div class="tab-bar__label">Market</div>
                        </button>
                    </label>
                    <label class="tab-bar__item" onclick="carousel.setActiveIndex(3)">
                        <input type="radio" name="tab-bar-a">
                        <button class="tab-bar__button">
                            <i class="tab-bar__icon ion-star"></i>
                            <div class="tab-bar__label">Economy</div>
                        </button>
                    </label>
                </div>
            </ons-page>
    

    also below is js for active class

    var myCarousel = document.getElementById(‘carousel’);
    myCarousel.on(‘postchange’, function(event){
    document.getElementById(‘myTabbar’).children[event.activeIndex].children[0].checked = true;
    });

    Please help


  • Onsen UI

    @shweta You need to wait for the DOM to be loaded with ons.ready() so you can target the carousel. Also add the postchange as a simple event listener. This is working for me:

    ons.ready(function () {
        var myCarousel = document.getElementById('carousel');
        myCarousel.addEventListener('postchange', function (event) {
          document.getElementById('myTabbar').children[event.activeIndex].children[0].checked = true;
      });
    })
    


  • misterjunio Thanks its working fine now.
    Is there any way to load DOM faster. Because of this all my plugins are loading slow. So each time I have to initialise js in setTimeout() function to work properly.
    Please Help


  • Onsen UI

    @shweta I don’t think you need that setTimeout() at all. If you’re loading several plugins it’s normal that it takes some more time but I don’t think there’s something you can do about that :confused:



  • This post is deleted!

Log in to reply