React-slick: When using fade, slides are still stacked, meaning links etc on lower slides are inaccessible

[ghost]

When using the fade options, slides are not actually set to display: none their visibility and opacity is just altered. This means that which ever slide is last in the list is the one which is actually clickable. For example, create a slideshow of images with links - https://codesandbox.io/s/7j6j388070 - No matter which slide is shown, you can only ever get to the link on the last slide.

Once a slide isn't visible it needs it's display property changing so it doesn't affect the other slides and sit on top of them.

[VinceSJ]

I had the same issue just yesterday. I made this component as a workaround:

const ClickableEnvironmentInCarousel = ({ children }) => {
  return (
    <WhateverBoxDivThingYouUse
      position="relative"
      zIndex="1"
    >
      {children}
    </WhateverBoxDivThingYouUse>
  );
};

By wrapping that around whatever elements needed to be clickable, they would "elevated" when that carousel slide was active and thus clickable. Bit hacky, but it works until a proper fix gets implemented.

(Of course, you'll need some sort of implementation to pass the appropriate CSS position and z-index for the container div that does the elevating.)

[ghost]

Thanks for that. I decided it was easier just to do the following which seems to work :)

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

[chicgeek]

Alternate CSS workaround:

.slick-slide { pointer-events: none; }
.slick-active { pointer-events: auto; }

Though I'd like to see this fixed in the core code.

[stale[bot]]

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.

[marioelo]

I have the same problem and I think the @chicgeek solution is the right one to avoid conflicts with other elements z-index.