banners are superimposed on each other

My carousel in the dropdown menu;

By default, the drop-down menu is closed. Slides are loaded at this point. When you open the drop-down menu, the slides are superimposed on each other. If you open the drop-down menu, the slides work correctly <div class="slick-slide slick-cloned" data-index="-1" style="width: 0px;">....</div>

Why react-slick set width: 0px;?

[laveesingh]

That can’t be right. I did the following with dev branch:

• ran a build with yarn prepublish
• ran yarn link to use it in another test repo
• used the following snippet:

import React, { Component } from 'react';
import './App.css';
import Slider from 'react-slick'

class App extends Component {

  state = { display: 'block' }
  render() {
    const settings = {
      slidesToShow: 4,
      slidesToScroll: 4,
    }
    return (
      <div className='content'>
        <button onClick={() => {
          if (this.state.display === 'block')
            this.setState({ display: 'none' })
          else this.setState({ display: 'block' })
        }}>toggle</button>
        <div style={{ display: this.state.display }}>
          <Slider {...settings}>
            <div><h3>1</h3></div>
            <div><h3>2</h3></div>
            <div><h3>3</h3></div>
            <div><h3>4</h3></div>
            <div><h3>5</h3></div>
            <div><h3>6</h3></div>
            <div><h3>7</h3></div>
          </Slider>
        </div>
      </div>
    );
  }
}

export default App;

And it produced the following results:

Can you check latest commits in dev on the repo against your local dev branch to make sure you have the latest changes?

[astranavt]

I clone the repository, select the dev branch and run the npm run prepublish command, then I build my project with building components and see the same problem. And if variableWidth=true, then all works. this solution also works on release 0.21.0