React-slick: Fade with Links components only shows the last Link

Created on 24 Mar 2016 · 4Comments · Source: akiran/react-slick

It fades correctly and the content is changing, but if there is a Link in each slide, only the last Link will be clicked.
Here I modified jsfiddle to show an example https://jsfiddle.net/20bumb4g/166/

stale

Source

artemidas

👍4

Most helpful comment

I solved my problem by adding

.slick-initialized .slick-slide.slick-active {
  z-index: 1;
}

in my css.

josyan on 30 Sep 2016

👍11 🎉8

All 4 comments

Same problem. It looks like the hidden slides have an opacity of 0, but are still displayed (display: block;), so interaction is only possible with the last slide which is on top.

josyan on 30 Sep 2016

I solved my problem by adding

.slick-initialized .slick-slide.slick-active {
  z-index: 1;
}

in my css.

josyan on 30 Sep 2016

👍11 🎉8

Another way would be to add pointer-events: none; to hidden (opacity: 0) slides.

naltatis on 4 Aug 2017

👍1

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.