Making carousel to point to first carousel item | Adobe Higher Education
Skip to main content
S
Srinivas_Opti
Level 3
September 24, 2024
Beantwortet

Making carousel to point to first carousel item

  • September 24, 2024
  • 1 Antwort
  • 729 Ansichten

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

Dieses Thema wurde für Antworten geschlossen.
Beste Antwort von 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 Antwort

h_kataria
Community Advisor
h_katariaCommunity AdvisorAntwort
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_OptiAutor
    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

     

      Allgemeine NutzungsbedingungenAccessibility statement

      Loading footer...