The bug is relevant for npm version 1.8.1, 1.8.0
1.7.1 works fine.
"Downloaded" version works fine despite the fact it is marked as 1.8.0.
Initialized slider makes following markup:
<div class="my-slider js-slider slick-initialized slick-slider">
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 10000px; transform: translate3d(-2610px, 0px, 0px);">
<div class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1">
<div>
<div class="my-slider__item" style="width: 100%; display: inline-block;">
content of slide 1
</div>
</div>
</div>
<div class="slick-slide slick-cloned" data-slick-index="0" aria-hidden="true" tabindex="0">
<div>
<div class="my-slider__item" style="width: 100%; display: inline-block;">
content of slide 2
</div>
</div>
</div>
</div>
</div>
</div>
As we see, my elements .my-slider__item are wrapped by no-class div and .slick-slide div instead of being child elements of .slick-track container.
So, right markup has to look like
<div class="my-slider js-slider slick-initialized slick-slider">
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 10000px; transform: translate3d(-2610px, 0px, 0px);">
<div class="my-slider__item slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1">
content of slide 1
</div>
<div class="my-slider__item slick-slide slick-cloned" data-slick-index="0" aria-hidden="true" tabindex="0">
content of slide 2
</div>
</div>
</div>
</div>
JQuery 3.2.1
Discovered this issue today, the problem is there was a change to the rows option.
If you set the rows: 0 when initialising the slider, it resolves it.
Relevant commit:
https://github.com/kenwheeler/slick/commit/34612b42641e8fd4250f70666a8da67eb624d002#diff-eaaa72f2e5f1d4974e4f1ae902717908
Not sure why this was changed, it now adds these extra divs around all previous non-row implementations.
Thank you Colm, now I see this breaking change!
Because of this breaking change, I killed half a day of time to understand why my slider stopped working .. I even reworked part of my api in the hope that the error crept in there. Who makes such changes and does not put them in a prominent place? I advise you to emphasize the red color somewhere in the documentation!
Most helpful comment
Discovered this issue today, the problem is there was a change to the rows option.
If you set the rows: 0 when initialising the slider, it resolves it.
Relevant commit:
https://github.com/kenwheeler/slick/commit/34612b42641e8fd4250f70666a8da67eb624d002#diff-eaaa72f2e5f1d4974e4f1ae902717908
Not sure why this was changed, it now adds these extra divs around all previous non-row implementations.