Active class in tabs with respect to carousel item

[shweta]

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

[misterjunio]

@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;
  });
})

[shweta]

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

[misterjunio]

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

[shweta]

This post is deleted!

[naufal17]

@misterjunio how if I use angularjs? I need to make some indicators for the carousel

[onlineit]

https://onlineitguru.com/python-training.html

[mounika123]

In Bootstrap, if you refresh the page the tab is reset to the default setting. However, you can use the HTML5 localStorage object to save some parameters for the current tab locally in the browser and get it back to make the last active tab selected on page reload.
<!-- Carousel -->
<div id=“myCarousel” class=“carousel slide” data-ride=“carousel”>

<!-- Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to=“1”></li>

<!-- Carousel Controls -->
<a class=“left carousel-control” href="#myCarousel" data-slide=“prev”>
for more UI Course