react-slick
react-slick copied to clipboard
akiran
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
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
2021 and still experiencing this. Has anyone found a fix that can be used until @ddobby94 changes are merged?
Still facing the same issue! @ddobby94 Would be very grateful if you can please merge your code :)
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.
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.
That was exactly the problem, thank you very much!
