Issue with carousel react spa component AEM. | Community
Skip to main content
New Participant
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

kautuk_sahni
Employee
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
EstebanBustamante
EstebanBustamanteAccepted solution
New Participant
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