CODEWITHSUNDEEP
reactjstailwind-css
mxcdh
mxcdh

Reputation: 1113

react - tailwind hover showing only on last slide, not all

I have problem with slider in react. In line 32, I have hover background for each slide, but hover working only on last slide, why? - url for stackblitz

I trying everything, I spend on this 3 hours, what is wrong?

Upvotes: -1

Views: 77

Answers (1)

eYinka
eYinka

Reputation: 491

I found the problem. As I can see, you built a custom slider which is a good thing. But here, the other slides are actually layered relatively on top of each other. Which means the last slide will always be at the top of the stack even if the opacity is 0. I thought of using z-index to control it but I think this is even cleaner:

<div key={key} className={`absolute inset-0  transition duration-500 ease-in-out ${activeIndex === parseInt(key) ? 'visible opacity-100' : 'invisible opacity-0'}`}>

I modified Line 23 in SliderContent.jsx such that, if the current block is not active slide, add Tailwind's 'invisible' class so it pops it from the top of layer and user can hover successfully.

Tried it, it worked. Goodluck :)

Upvotes: 1

Related Questions