Slick: bug issue: npm version 1.8.0 1.8.1 creates odd containers above slider items

Created on 11 Dec 2017  路  3Comments  路  Source: kenwheeler/slick

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

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.

All 3 comments

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!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

k-lusine picture k-lusine  路  3Comments

BPSBiro picture BPSBiro  路  3Comments

rahi-rajeev picture rahi-rajeev  路  3Comments

xitongzou picture xitongzou  路  3Comments

hoghamburg picture hoghamburg  路  3Comments