when made to to auto play only images are changing not indicators at the bottom

[vikasacharya16]

When i tried to auto play the images by below code

const carousel = args.object.getViewById("myCarousel");
    setInterval(() => {
        if (carousel.selectedIndex == carousel.items.length - 1)
            carousel.selectedIndex = 0;
        else
            ++carousel.selectedIndex;
    }, 3000);
}

only the images will auto play. but not indicators at the bottom.

but when i manually scroll it, the indicators will change and no problem.

this is my xml

<pager:Pager items="{{ image_array }}" row="0" id="myCarousel" loaded="carouselLoaded" unloaded="carouselUnloaded" spacing="0%" peaking="0%"  showIndicator="true" backgroundColor="lightsteelblue">
                <pager:Pager.itemTemplate>
                    <GridLayout>
                        <Image src="{{ image }}" stretch="aspectFill" />
                    </GridLayout>
                </pager:Pager.itemTemplate>
            </pager:Pager>