React-slick: Slide's links are not clickable in fade mode

[phamviet]

In fade mode, track content is not accessible. Looks like this is intended behavior, but it's buggy also.

Step to reproduce:

1. Click Next
2. Click back

Result: Text1 link is overlay by Text2 track and is not clickable

Example https://jsfiddle.net/a2drpgus/3/

[costagolub]

853 pull request with the fix

[zachguo]

Is this the same issue as https://github.com/akiran/react-slick/issues/269?

[costagolub]

@zachguo yes, it's the same issue

[laveesingh]

Similar problems have been fixed in previous releases. Please feel free to request reopen if disagree.

[theliveseven]

In fade mode, where each slide contains a button or any other element which binds to a click event

1. Only the last slide is clickable
2. Clicking on other slides invokes the click of last slide

I am using the latest version of react-slick and I request to reopen the issue @laveesingh .

Replicate on CodeSandBox

[Juan-Rios]

Hi, this is the way I solved the bug.

CSS

// In this way the first slide is
// the clickable one on page load
.slick-slide:first-child {
    z-index: 10;
}

JS

// After first slide change, the clickable
// slide is managed by JS
var settings = {
    afterChange: function() {
        let siblings = document.querySelectorAll(".slick-slide");
        let current = document.querySelector(".slick-current");

        for(let i = 0; i < siblings.length; i++) {
            siblings[i].style.zIndex = 0;
        }
        current.style.zIndex = 10;
    }
};

Hope it helps.

[franguerini]

Hi, im having the same issue, when the button is clicked it does not linke to the destination id of the displayed slide. Instead it links to the first slide id.

Here is my code:

• Settings

const settings = {
    infinite: false,
    dots: false,
    arrows: true,
    fade: true,
    responsive: [
      {
        breakpoint: MIN_WIDTH_DESKTOP,
        settings: {
          arrows: false
        }
      }
    ]
  };

• Slider

<Slider {...settings}>
    {destinations.map((destination, index) => (
       <Destination
            destination={destination}
            totalDests={destinations.length}
            index={index}
            key={destination.id}
     />
     ))}
</Slider>

• Slider Child

 <Link to={ROUTES.DESTINATION(destination.id)} className="dest-button-cont">
    <Button text={STRINGS.EXPLORE} color="light-blue" textColor="white" size="small" />
    <img alt="arrow" src={icArrow} className="button-arrow" />
</Link>

Hope it helps to fix this issue.

[zhe]

Check this solution: https://github.com/akiran/react-slick/issues/269#issuecomment-250831665

[Juan-Rios]

Yup, after posting this I realized I can achieve the same with pure CSS. Forgot to comment here, thanks for the link.

By the way, only using .slick-active selector worked for me.

[afiaudofia]

Yup, after posting this I realized I can achieve the same with pure CSS. Forgot to comment here, thanks for the link.

By the way, only using .slick-active selector worked for me.

Thanks Juan-Rios,
Setting the z-index of the active slide to 10 solved the problem.