React-slick: banners are superimposed on each other

[astranavt]

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]

I think this example should help you: https://codesandbox.io/s/x26z0lxlpp
If it doesn't please consider creating your own.

[astranavt]

if the default layer is hidden, the slider does not work

here is an example:
https://codesandbox.io/s/4jpynlxmw

[laveesingh]

Commit: https://github.com/akiran/react-slick/commit/265d0c2f06604e4953b1a2e3fc09f6471fe0a182 should fix it. Changes will be released soon.

[astranavt]

after the update, the problem remained

[laveesingh]

These changes haven't been released yet, the next release will be made soon.

[astranavt]

I have updated to the latest version but the problem has not disappeared
how to fix?

[laveesingh]

Commit: 0a0a4ce solves it for sure.
This will be released soon.

[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

[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?