React-responsive-carousel: Support for clickable slides, with hyperlinks

[ajmas]

From what I can tell it is not possible currently to add a hyperlink to a slide, such that when clicking on it would follow the referenced page?

For example:

        <div>
            <a href="http://github.com/"><img src="images/2.jpeg" /></a>
            <p className="legend">Legend 1</p>
        </div>
        <div>
            <a href="http://localhost:2020/"><img src="images/2.jpeg" /></a>
            <p className="legend">Legend 2</p>
        </div>
        <div>
            <img src="images/3.jpeg" />
            <p className="legend">Legend 3</p>
        </div>
        <div>
            <img src="images/4.jpeg" />
            <p className="legend">Legend 4</p>
        </div>
        <div>
            <img src="images/5.jpeg" />
            <p className="legend">Legend 5</p>
        </div>
        <div>
            <img src="images/6.jpeg" />
            <p className="legend">Legend 6</p>
        </div>

The expectation here is click on slide 1 and 2 would take me to referenced page.

I did try using onClickItem, to hoping this could help, but it just returns the slide number, when doesn't allow me to access the content to process myself.

I did also try in the sandbox: https://codesandbox.io/s/rql0ovl5m

[danthul]

I was having trouble with this too. I noticed that the hyperlink was there, but only 17 pixels height for some reason. I was able to get it to work by putting another div around the image:

    <Carousel autoPlay>
      <div>
        <a href="http://www.github.com" target="_blank">
          <div>
            <img src="http://lorempixel.com/output/cats-q-c-640-480-1.jpg" />
          </div>
        </a>
        <p className="legend">Legend 1</p>
      </div>

https://codesandbox.io/s/l47nyr4qzz

[MichaelWheldon]

You should just have to make your anchor tag display: block to fill the space, it's an inline element otherwise.

[yeecai]

You should just have to make your anchor tag display: block to fill the space, it's an inline element otherwise.

It worked for me like a charm. Thanks a lot.

[ajmas]

I'll close this issue since there is a solution that appears to work for others - I am no longer in a position to test myself, so I'll trust them on it.

[Jongmun-Park]

i handle it by using onClickItem props.
` onClickItem={(index) => {
window.open(art.imageUrls[index].url)
}}

`