Responsive height for vertical layout of slick slider blocks?

Question

css

I tried to solve the problem and came across this problem.

There is a slick slider with blocks placed vertically (vertical: true). In each block, an image is "hidden" to the text. When you select the active (or center) slide, this hidden image appears.

But for some reason the slider "inadequately" behaves (it jumps, then displays all the slides instead of the required 3). adaptiveHeight- does not work for vertical block layout.

Question: How to solve this problem so that there are 3 vertical slides (for example), the central one (or just active) has an image?

code pen

Answer 1

An interesting problem. Look, you have a picture with and an absolute paragraph in your slide. Both exit the stream, i.e. for the slide browser, consider it empty. And for the slick. So he reduces the size of the slider to 1 slide, where there is a picture. Will not make friends with slick. As an option - make the picture absolute + transparent + move up. And for the class to return everything back. I fell for doing it, I can just throw a working version of your slider - here it isdisplay: none
display: none.slick-center