Issue with carousel react spa component AEM.

[janaki1]

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

[EstebanBustamante · Accepted solution]

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.

[kautuk_sahni]

@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.