react-slick: slide width bug when upgrading to 0.14
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
}
}]
};
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 1
- Comments: 18 (5 by maintainers)
Commits related to this issue
- Fixed #465. - slideWidth used trackWidth directly in calculations, but this.track is not the same thing as this. — committed to Josh-ES/react-slick by Josh-ES 8 years ago
- Merge pull request #469 from Josh-ES/fix-issue-465 Fixed #465. — committed to akiran/react-slick by akiran 8 years ago
- Update react slick to latest 0.15.4 (#11) * Alternative fix for #384 * Tiny spelling fix in README.md * Refactored demos into examples folder * Expose previous and next function * add fun... — committed to sky-uk/react-slick by deleted user 7 years ago
If you are using flex property, add the below in your css
I am also seeing the same issue. On scroll in a parent div the translation calculation I am seeing some really interesting numbers.
UPDATE: it can’t be surrounded by flex… When i removed flex around now it works
Can you test out 0.14.2
@akiran I am also seeing this issue. I cloned your example and changed it to 2 slides to show.
Reproduceable steps:
@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.