How to redirect when clicked on Carousel images in React?

user_7474903 0
Viewed 1588

In a React project, I have Carousel installed from 'react-responsive-carousel' npm package. In that I want to redirect to some component on click of images sliding in it. How could be it done

const data = [
    {
      img:
        "https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
    },
    {
      img:
        "https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg"
    },
    {
      img:
        "https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512__340.jpg"
    },
    {
      img:
        "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/sunflower-1508785046.jpg"
    }
  ];

<Carousel autoPlay infiniteLoop showArrows={false} showThumbs={false}>
          {data.map((item) => (
            <Link to="/images">
              <img src={item.img} />
            </Link>
          ))}
</Carousel>

Below is the link for CodeSandbox for better clarity CodeSandbox Link: https://codesandbox.io/s/sad-sea-1ptl3

reactjs javascript
5 Answers

add your target URL to your data object, like this:

const data = [
    {
      img:
        "https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      targetURL: "/posts/blahblah?id=10100110",
    },
       ......]

then add onChange props to the image tag and use the useHistory to change your route, e.g:

const history = useHistory();

<img src={item.img} onChange={() => history.push(item.targetURL)}/>
user_152505540

Just replace Link by div and use onClick() on this tag

{data.map((item, index) => (
            <div
              key={index}
              onClick={() => window.open("https://javascript.info/")}
            >
              <img src={item.img} alt="img" />
            </div>
          ))}
user_147910870 
    {
      id:1,
      img:
        "https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
    },
    {
      id:2,
      img:
        "https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg"
    },
    {
      id:3,
      img:
        "https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512__340.jpg"
    },
    {
      id:4,
      img:
        "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/sunflower-1508785046.jpg"
    }
  ];

<Carousel autoPlay infiniteLoop showArrows={false} showThumbs={false}>
          {data.map((item) => (
            <Link to=`/images/${item.id}`>
              //change <Route /> in App.js accordingly
              <img src={item.img} />
            </Link>
          ))}
</Carousel>```
user_140478380

The <a> tag generated from <Link> is there it's just that it's about 20px high.

I'm not sure what css the carousel generates but I suggest diving in and seeing if you can absolute position the <a> tag and take 100% width and height - to a parent that has position relative ofcourse.

user_36047960

Ideally wrapping of your img element with Link should have worked but on inspecting the css, I noticed that your Carousal css , specifically the .carousal img selector has the rule pointer-events:none and that's why you're not seeing that hand cursor when hovering over the img as you generally do.

So you can either add one more layer like that of div between Link and img and that will work.

Or you can override the css of the Carousal library that you're using.

user_81306900
Related