Vertical Mode slick-track height is too high

In the Vertical mode example taken from the repository, the rendered slick-track has a height (2148 px) far in excess of the size of its contents. In my test, the slick-list parent had its height set to 546px - from visual observation at this height the slick-list is just tall enough to contain all 3 sliders.

Why is the nested slick-track div set to a much higher value?

Here is the HTML

<div class="slick-slider slick-vertical slick-initialized" dir="ltr">
<button type="button" data-role="none" class="slick-arrow slick-prev" style="display: block;"> Previous</button>
<div class="slick-list" style="height: 546px;">
<div class="slick-track" style="opacity: 1; transform: translate3d(0px, -546px, 0px); height: 2184px; transition: -webkit-transform 500ms ease 0s;">
<div data-index="-3" tabindex="-1" class="slick-slide slick-cloned" aria-hidden="true" style="width: 1461px;">

To reproduce, clone the repo, install and run it, then inspect the style height settings of the slick-track and slick-list div elements in the Vertical mode example

[bahamagician]

I figured out what was causing the problem for me. Although your problem may be different, I’m putting this here in hopes that it may help somebody else. On a vertical slider, if the number of “slidesToShow” is greater than the actual number of slides present, then the vertical slider breaks. For example, if I have “slidesToShow” set to 4 but there are only 3 images/slides, then I get the issue. So my workaround was to do a manual check of the length of the array feeding the data to my slideshow and only trigger the vertical slider if there were enough slides. Hope this helps somebody.

[ddobby94]

In vertical mode the height of the slides is not measured correctly. Basically this library only measures the first slide and uses that height for all the other slides. I’ve just created a fix for this check this fork out (the last 3 commits): https://github.com/ddobby94/react-slick