React-slick: Link tags do not work properly when used in combination with fade

[dmorda]

I think I've found an odd bug in the way the react-slick works when used in combination with the "fade" option and tags within the carousel item.

Steps to Reproduce

1. Visit https://codesandbox.io/s/react-slick-playground-bglbv
2. Hover over "Link 1" text and notice it says "/slide4/" instead of "/slide1/" like it should based on the source code
3. Scroll through a few more items and notice the link doesn't seem to change, but everything else does.

Not sure if this is an issue in the react version or Slick itself.

[akiran]

I followed the steps you mentioned and I couldn't replicate the issue you described.

it is working as expected

[dmorda]

I can still replicate the issue, but my directions might not have been that good. Here's a screenshot that hopefully better illustrates the issue.

[witcradg]

For what it's worth, I was able to see this issue on the code the op provided.

[akiran]

You can re-open the issue. I will check it out

On Sun, 12 Jan 2020 at 12:07 AM, Dean Witcraft [e-mail]
wrote:

For what it's worth, I was able to see this issue on the code the op
provided.

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
https://github.com/akiran/react-slick/issues/1696?email_source=notifications&email_token=AAZ64HYIV3FWC2UV6WEOH2DQ5IGV7A5CNFSM4J6ZKMJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIWIKCI#issuecomment-573342985,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAZ64HYDL5OAMXTAXEIKTBDQ5IGV7ANCNFSM4J6ZKMJA
.

[valmirduraku]

I have encountered the same bug today.
Settings as below:
var settings = { dots: false, infinite: true, autoplay: true, speed: 2000, autoplaySpeed: 2500, slidesToShow: 1, slidesToScroll: 1, arrows: false, draggable: true, fade: true };

{[0,1,2,3,4].map((item, index) => ( <div key={index} onClick={() => console.log("index", index} > <p>Index: {item}</p> </div> ))}
It seems that react-slick renders all div elements and for each one of them, index on click is set to the last item.
Setting 'fade' to false solves this issue.

[jrraymundo]

I'm having this same issue as well.

var settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, arrows: true, fade: true };

<Slider {...settings}> <div> <h1> <a href="https://www.google.com">Google</a> </h1> </div> <div> <h1> <a href="https://www.amazon.com">Amazon</a> </h1> </div> </Slider>

Slide 1 is a link to google.com, while slide 2 is a link to amazon.com. If you click on the link on Slide 1, its supposed to take you to google.com but brings you to amazon.com instead.

You can see and try the live code here https://codesandbox.io/s/zen-wave-srxtt

By any chance, has anyone done a workaround for this without setting fade to false?

[jrraymundo]

I'm having this same issue as well.

var settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, arrows: true, fade: true };

<Slider {...settings}> <div> <h1> <a href="https://www.google.com">Google</a> </h1> </div> <div> <h1> <a href="https://www.amazon.com">Amazon</a> </h1> </div> </Slider>

Slide 1 is a link to google.com, while slide 2 is a link to amazon.com. If you click on the link on Slide 1, its supposed to take you to google.com but brings you to amazon.com instead.

You can see and try the live code here https://codesandbox.io/s/zen-wave-srxtt

By any chance, has anyone done a workaround for this without setting fade to false?

In case anyone gets this same issue in the future, I was able to workaround this by adding a relatively high z-index value to .slick-active and .slick-current classes

[valmirduraku]

@jrraymundo I just tested your workaround and it works perfect. Thanks!

[bernikishore]

Still i am facing the issues in the demo.
https://react-slick.neostack.com/docs/example/fade

In my local i have used CSS for slick active element

[yanneves]

Just ran into this issue today, compared with the example on https://kenwheeler.github.io/slick/, the react-slick version is missing the z-index value. From what I can tell, Slick should apply z-index: 999 to the active slide and z-index: 998 to inactive slides.

@jrraymundo's workaround above does the trick, for example:

.slick-slide {
  z-index: 998;
}

.slick-active.slick-current {
  z-index: 999;
}

[carolinesoleelee]

@jrraymundo I was literally suck on this problem for 13 hours, thanks for the work around!

[carlitosz]

@jrraymundo @yanneves My slider was on prod before I realized the links were pointing at the same slide! 😬

Thanks!