React-slick: Handling with CSS Modules - react-slick in gatsby project

[flavioalves]

Hey guys!

I'm using react-slick in gatsby project. I'm trying to customize the "slick-current" but I couldn't because Gatsby use a CSS Module approach.

Do we have some work around to do it? Any suggestion?

Thanks!

[laveesingh]

What is it that you're doing to customize?

[flavioalves]

Hey @laveesingh!

I would like to customize a couple of things.

1. The position of some slide item (I need it centered in the screen but as the style is not applied the property is not working very well) ;

2. I need identity the current centered item to change its style;

3. After some next/back event I need animate the image above the text;

Here a frame with my slider:

[silicakes]

@flavioalves

1. Create a container for your slider, and position it appropriately.
   You may want to take a look at centerMode and centerPadding for some alignments.
2. You can identify the current item with several methods. the clearest one is to bind a callback on afterChange and update your state from there:
   

   configuration

afterChange: (index) => {
  this.setState({currentSlide: index});
}

slider

<Slider>
  {yourItems.map((item, index) => {
    return <item className={`${index === this.currentSlide ? "activeClass": ""}`}
  })}
</Slider>

1. afterChange can take care of your animations as well - just create your images with the corresponding indices and animate it by either adding a class or calling an animation function on it:

render

render() {

return (<div>
    <div className="image-container">
       {yourImages.map((img, index) => {
          return <div className={this.state.currentSlide === index ? "animate": ""}>...</div>
        })}
    </div>
    <Slider>...</Slider>
  </div>)
}

[laveesingh]

I presume the problem is solved, so I'm closing the issue.