react-slick
react-slick copied to clipboard
akiran
Fix adaptive height when multiple slides are visible
Issue When multiple slides are visible and adaptiveHeight is turned on, then slider's height is calculated from first visible slide only.
Desired behavior Slider height should be calculated as max. height of all slides visible.
How to reproduce problem:
var settings = {
infinite: true,
// Multiple slides visible
slidesToShow: 3,
slidesToScroll: 1,
// Slider height is adaptive (set dynamically based on content height)
adaptiveHeight: true
};
return (
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
<p>Hello</p>
</div>
<div>
<h3>3</h3>
<p>See ....</p>
<p>Height is adaptive</p>
</div>
</Slider>;
);
This works for me. Thanks @Poky85
Added to npm
Anyone who wants this yarn add react-slick-adaptive-height-fixed then find/replace in project: react-slick with react-slick-adaptive-height-fixed
@Poky85 I installed react-slick-adaptive-height-fixed, but there is still a bug on the last slide of the slider when infinite = true.
Slider settings:
slidesToShow: 2,
slidesToScroll: 2,
adaptiveHeight: true,
dots: false,
arrows: false,
infinite: true,
speed: 500,
afaik react-slick-ad-height-fixed is a patched version.
Correct, I am reporting a bug in the patched version. Without the patch the problem is much worse 😢
Correct, I am reporting a bug in the patched version. Without the patch the problem is much worse 😢
there is two patched versions, react-slick-adaptive-height-fixed and react-slick-ad-height-fixed, you talked only about the first one, did you try the later?
