CODEWITHSUNDEEP
reactjsnext.jsreact-responsive-carousel
wick3d
wick3d

Reputation: 1392

How to use onClickItem with react-responsive-carousel?

I am trying to click images with using react-responsive-carousel. And on Click it should direct to the Link onClickItem. I have tried it with <Link> and <a>. Doesnt work.

  const onClickItem = () => console.log('Item');
        <Carousel
              showStatus={false}
              showThumbs={false}
              autoPlay={true}
              infiniteLoop={true}
              swipeable={false}
              emulateTouch={true}
              //@ts-ignore
              animationHandler="fade"
              transitionTime={5000}
              onClickItem={onClickItem}
            >
              {banners.map((banner) => (
                <div className="block" key={banner.id}>
                  <Link href={banner.href}>
                    <a>
                      <div>
                        <Image src={banner.image} width={768} height={400} alt={'Banner image'} />
                      </div>
                    </a>
                  </Link>
                </div>
              ))}
            </Carousel>

How to detect on Click with this component?

Upvotes: 0

Views: 1255

Answers (1)

FAOZI
FAOZI

Reputation: 102

  1. define func on click

    const doClick = (bannerId) => {console.log(bannerId)}

  2. add some func in your map

    {banners.map((banner) => ( <div onClick={doClick(banner.id)} className="block" key={banner.id}> <Link href={banner.href}> <a> <div> <Image src={banner.image} width={768} height={400} alt={'Banner image'} /> </div> </a> </Link> </div> ))}

Upvotes: 0

Related Questions