Making carousel to point to first carousel item

[Srinivas_Opti]

Hello,

I am using   /apps/core/wcm/components/carousel/v1/carousel/ as the reference

This component is located on step1 of forms , this has 3 slides. When i navigate to slide2 or 3

,then move to step2 of forms and come back to step1 . I need to reset the carousel component that it points to slide1 

Also after resetting to slide1 ,when we navigate again to slide 2 and 3 it must work correctly

Please provide inputs as how we can reset the carousel component to slide1 using JavaScript

Regards,

Srinivas

[h_kataria · Accepted solution]

It depends on how your form is implemented. But essentially there are multiple ways. For e.g. when you move back to step1 then a simple javascript like below can reset it to the first slide

document.querySelector("#carousel-bfe4fa6647 li.cmp-carousel__indicator").click()

You can replace #carousel-bfe4fa6647 with your form identifier.
Hope this helps

[Srinivas_Opti]

Hello @h_kataria ,

Thanks for the input. Using the method click(), will need to click  it right??

I will need that without clicking on anything

I tried using the below method mentioned in the link 

function refreshActive()  , like removing ("cmp-carousel__item--active") on slide2 or side3 and adding to slide1

but when i hit the next or previous button ,the navigation does not happen correctly and  shows the slide3 or 2 on wrongly on which i stopped before moving to step2 

https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...

What could i do so that the button will shows the slides correctly after resetting to slide1

Regards,

Srinivas