Making carousel to point to first carousel item | Community
Skip to main content
S
Srinivas_Opti
Level 3
September 24, 2024
Solved

Making carousel to point to first carousel item

  • September 24, 2024
  • 1 reply
  • 729 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by h_kataria

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

1 reply

h_kataria
Community Advisor
h_katariaCommunity AdvisorAccepted solution
Community Advisor
September 24, 2024

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

    S
    Srinivas_OptiAuthor
    Level 3
    September 24, 2024

    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/wcm/components/carousel/v1/carousel/clientlibs/site/js/carousel.js

     

     

     

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

     

    Regards,

    Srinivas

     

      Terms & ConditionsAccessibility statement

      Loading footer...