React-slick: slide width bug when upgrading to 0.14

[aribronstein]

I upgraded to 0.14 on my development environment today and my slides started getting very large width values and not showing multiple slides at once.

my settings:

settings = {
      dots: false,
      infinite: false,
      speed: 500,
      slidesToShow: 6,
      slidesToScroll: 6,
      waitForAnimate: false,
      // Resolutions
      responsive: [{
        breakpoint: 1510,
        settings: {
          slidesToShow: 6,
          slidesToScroll: 6
        }
      }, {
        breakpoint: 1025,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 4
        }
      }, {
        breakpoint: 610,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3
        }
      }, {
        breakpoint: 480,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      }, {
        breakpoint: 321,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      }]
    };

[ryjoyce]

Out of curiosity, are you using a combination of flexbox and percentage widths in the parent nodes are you? I'm trying to constrain the aspect ratio of a div within a flexbox'd node and then embedding the slider into that and experiencing the giant images.

Ignoring the recalculation badtimes i've got screen resize, it feels like something isn't able to correctly calculate it's width - if i hard code px values it all works fine, but that kinda defeats the point of what i'm trying to do!

I'm getting around it atm by positioning absolutely and setting top, right, bottom and left to 0; feels a bit hacky tho.

[aribronstein]

I'm using Bootstrap 3 so the slide elements are each a percentage width in the css I am not using flex in connection to slick.
I am using flex in an sibling to the slider but less relevant.

[akiran]

If you are using flex property, add the below in your css

* {
  min-height: 0;
  min-width: 0;
}

[akiran]

I couldn't replicate this issue with the given settings

Can you replicate this issue with jsfiddle
https://jsfiddle.net/kirana/20bumb4g/

[aribronstein]

Here is the problem reproduced it might need a resize of the preview pane to trigger
https://jsfiddle.net/9sw8hqoo/1/

Here is the same jsfiddle with v0.13.6 and it is working great
https://jsfiddle.net/0adgL6aq/1/

[creatifyme]

@akiran I am also seeing this issue. I cloned your example and changed it to 2 slides to show.

Reproduceable steps:

• https://jsfiddle.net/creatifyme/20bumb4g/1245/
• resize the rendered slider panel width
• example http://i.imgur.com/cvagDL8.gifv

[benbarber]

Im getting the same issue after updating, it was working perfect before 0.14. If it helps I have the slider in a column using React Flexbox Grid and have tried adding the CSS as mentioned by @akiran but that didn't make any difference for me.

[bradbirnbaum]

I am also seeing the same issue. On scroll in a parent div the translation calculation I am seeing some really interesting numbers.

[akiran]

@Josh-ES People started facing some issues after we merged vertical PR
Do you have any insights ?

[Josh-ES]

@akiran I have a rough idea of what might be causing this, I'll investigate further and submit a pull request in a few. Bear with me!

EDIT: see PR #469. I believe I've solved it, but I'll take another look if this issue, or indeed any other issue, is still present.

[akiran]

Can you test out 0.14.2

[aribronstein]

looks great, thanks!

[MakarovAV]

Broken for me at the moment (0.14.5)

[giladbr]

It seems it's a bug they didn't finish fixing. Here's a workaround that works for me - add the following to React's component that contains the react-slick:

```
constructor() {
[...]
this.onWindowResized = this.onWindowResized.bind(this);
}

componentDidMount() {
    window.addEventListener('resize', this.onWindowResized);
}


componentWillUnmount () {
    window.removeEventListener('resize', this.onWindowResized);
}

onWindowResized() { //add debounce for performance?
    this.forceUpdate(); //react's default forceUpdate
}

```

This will effectively force React to re-render the entire component on window resize, fixing the problem.

• The credit goes to the user @iandoe that wrote about it a year and a half ago...

[trekinbami]

+1 - The demo and my own code completely break on a resize.

[uragecz]

^0.23.2 and still broken.. content is constantly growing

[uragecz]

UPDATE: it can't be surrounded by flex.. When i removed flex around now it works