Issue with carousel react spa component AEM. | Community
Skip to main content
May 6, 2024
Solved

Issue with carousel react spa component AEM.

  • May 6, 2024
  • 2 replies
  • 835 views

I am facing issue with touch swipe functionality which i have implemented.

I have 3 images in Carousel for 1 image i have authored link. when i am clicking on the image  it is moving to next image in the carousel. once carousel reaches last image then page redirecting is happening. but that page redirection need to work for 1st but once reached last image in the carousel then page redirecting.

This is code i have written for touch swipe functionality

 handleTouchStart = (e: React.TouchEvent<HTMLDivElement>): void => {
        this.setState({ startX: e.touches[0].clientX });
      };
   
      handleTouchMove = (e: React.TouchEvent<HTMLDivElement>): void => {
        this.setState({ endX: e.touches[0].clientX });
      };
   
      handleTouchEnd = (): void => {
        const { startX, endX } = this.state;
        const deltaX = endX - startX;
   
        if (deltaX > 50) {
          // Swipe right
          this.prevSlide();
        } else if (deltaX < -50) {
          // Swipe left
          this.nextSlide();
        }
       
      };
 
Can anyone help me how to fix this issue

   

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 EstebanBustamante

Hi,

 

Please check how the HTML is being generated. It seems like the anchor (link) is not placed where it should be, resulting in redirection wherever it is found. Ensure that the anchor is set within the slide and not over the entire carousel.

 

Hope this helps.

2 replies

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
May 7, 2024

Hi,

 

Please check how the HTML is being generated. It seems like the anchor (link) is not placed where it should be, resulting in redirection wherever it is found. Ensure that the anchor is set within the slide and not over the entire carousel.

 

Hope this helps.

Esteban Bustamante
kautuk_sahni
Community Manager
Community Manager
June 4, 2024

@janaki1 Did you find the suggestion helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

Kautuk Sahni