Thumbnail click event for antd carousel

Question

Hi all I have following code

    const App = () => {
      const mediaRef = useRef(null);
      const navRef = useRef(null);
      const [direction, setDirection] = useState(null);

      const onChange = (currentSlide) => {
        if (direction === "next") {
          mediaRef.current.goTo(currentSlide + 1, false);
        } else {
          mediaRef.current.goTo(currentSlide - 1, false);
        }
      };

      const handleNext = () => {
        setDirection("next");
        navRef.current.next();
      };

      const handlePrev = () => {
        setDirection("prev");
        navRef.current.prev();
      };

      const imageList = [ some images array ];
     return (
        <>
          <>
            <Carousel
              asNavFor={navRef.current}
              ref={mediaRef}
           >
              {imageList?.map((el, id) => (
                <ImageWrapper key={id}>
                  <img src={el} alt={"name"} />
                </ImageWrapper>
              ))}
            </Carousel>
            {imageList?.length > 1 && (
              <>
                <Button onClick={handlePrev}>
                  <LeftOutlined />
                </Button>
                <Button onClick={handleNext}>
                  <RightOutlined />
               </Button>
              </>
            )}
          </>

          {imageList?.length > 1 && (
            <Carousel
              slidesToShow={3}
              centerMode={true}
              asNavFor={mediaRef.current}
              ref={(carousel) => (navRef.current = carousel)}
              beforeChange={onChange}
            >
              {imageList?.map((el, id) => (
                <>
                  <divkey={id}>
                    <img src={el} alt={"name"} />
                  </div>
                </>
              ))}
            </Carousel>
          )}

          <>
            <Button onClick={handlePrev}>
              <LeftOutlined />
            </Button>
            <Button onClick={handleNext}>
              <RightOutlined />
            </Button>
          </>
        </>
      );
    };

I am doing following, I am taking antd carousel adding another carousel for thumbnails and putting custom arrows, clicking on next and on previouse buttons it automatically change main image and thumbnail.

Now I am trying to put onClick event on thumbnails, I mean Thumbnails should be clickable and by click, the large image and thumbnail should be changed. How can I achieve that ?

Answer 1

You can add a click handler on the thumbnail with the clicked id as parameter

           <ThumbnailWrapper key={id}>
            <img
              src={el}
              alt={"name"}
              onClick={() => thumbnailClicked(id)}
            />
          </ThumbnailWrapper>

then do something with the id in the defined function:

const thumbnailClicked = (id) => {
    console.log("thumbnail clicked:",id);
    //then e.g. set parent the same as the thumbnail.
    mediaRef.current.goTo(id, false);
  };