Current (active) slide should have an indicator class applied

[zdolin]

Bugs and Questions

Describe Your Environment

• What version of nuka-carousel are you using? v5.1.2
• What version of React are you using? React 17.0.2 (also 18.0)
• What browser are you using? Chrome

Describe the Problem

Codesandbox: https://codesandbox.io/s/cranky-sea-j5uszw

Expected behavior: Current (active) slide should have an indicator class applied (".slide-current" or similar). Actual behavior: No special classes are applied to the current slide besides ".slide .slide-visible", which doesn't distinguish it from any of the others. Therefore, there's no way to tell programmatically (from what I can tell) what the current slide is, or apply special styling for the active/current slide.

Also note that wrapAround behavior is buggy when scrolling left (observable when clicking Prev a few times).

Thanks!

[zdolin]

Note this occurs when using the following combination of props (see codesandbox above):

{
  wrapAround={true}
  animation="zoom"
  slidesToShow={6}
  cellAlign="center"
}

I think the key issue is slidesToShow being greater than 1, which means multiple slides are visible at once and therefore it cannot be distinguished which is the active slide.

[ValGeorgiev]

Hey @zdolin thanks for raising this with us. It sounds easy to fix, I will prepare something today 🤞

[zdolin]

@ValGeorgiev great, thank you so much! Did you see my note about the wrapAround behavior as well? I can log a separate ticket for that, if you'd prefer.

[ValGeorgiev]

@zdolin Yes, another issue with sandbox will do the job. Thanks

[ValGeorgiev]

This should be fixed in v5.1.3

[zdolin]

Excellent - when is that planned for release?

[ValGeorgiev]

@zdolin It's already released. v5.1.3 should be in npm :)