React-slick: Custom classes for dots based on slides being in the past, present and future.

[paulcredmond]

Is there a way to add classes to the dots so we can see:

• Slides that have been passed already
• Current slide (yes, we have a class for this: slick-active)
• Slides not yet viewed

The dots could then be styled to give this effect:

I've been thinking about it but can't think of an easy solution for this.

[chicgeek]

You should be able to use the existing classes to help select these for styling.

Past: .slick-dots li
Present: .slick-dots .slick-active
Future: .slick-dots .slick-active ~ li

The selector specificity is a little high for my preference, but it will help you achieve what you're after.

[paulcredmond]

@chicgeek That's a good idea, however I'll want the dots that have been navigated once not to change back to the normal dots style if the user goes back to previous slides.

E.g. Slide 2 is light grey, user navigates to slide 2 and it changes to dark grey, user navigates back to slide 1 but slide 2 should remain dark grey. I think some classes will have to be applied and left there or something.

[chicgeek]

Sounds like a fairly custom use case. You should be able to add these fairly easily with Slick's afterChange event.

[paulcredmond]

Yep that's exactly how I got it, thanks.