slickAdd doesn't work when responsive breakpoints are applied.

slickAdd doesn’t work when responsive breakpoints are applied.

====================================================================

http://jsfiddle.net/208rwLte/ You have to resize the window so the fiddle results panel has less than 500px width to see the problem.

====================================================================

Steps to reproduce the problem

1. Enable slick with responsive breakpoints and different number of slidesToShow in the breakpoints than the default one.
2. Use the slickAdd method to add new slides.

====================================================================

What is the expected behaviour?

You can add new slides even when a breakpoint is matched and/or they don’t disappear when the window is resized and a breakpoint is matched.

====================================================================

What is observed behaviour?

When a breakpoint is matched, the slides aren’t added, and if they were previously added when no breakpoints were matched, they disappear when resizing so a breakpoint is matched.

====================================================================

More Details

• Happens in all browsers I’ve tested (Chrome, Firefox, Edge).
• jQuery 1.10, Slick 1.8.1
• Don’t know.

As a footnote, I’d like to say that I thought this would’ve for sure happened to someone else, but I both googled and searched in the issues for it and couldn’t find anything, so sorry if it was already reported.

[gummiforweb]

Was having same issue…

When slide is added from the init action via ajax, everything is fine. But when resize the browser, the responsive kicks in, and remove all the added sliders (but the original ones still there).

@zedee direction helps, below is what actually happened:

---

After some digger into the code, when responsive happens, it’ll call these methods in sequence: checkResponsive() -> refresh() -> destroy() -> cleanUpRows()

Here, the function “cleanUpRows()” is where it messed up. (https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L825)

As you can see, it grabs the original slides via ‘_.$slides.children().children();’.

---

Ok, now let’s rewind back a little to when the slider is initialized.

When a slider is initialize, the methods sequence is: init() -> buildRows()

In thie “buildRows()” method, you can see it takes the original html mock up, and wrap with 2 divs. (https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L570)

Now, let’s look at when addind slide, the method “slickAdd()” just added the mockup directly, without the 2 extra divs. (https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L825)

So, when the “cleanUpRows()” function is called, it’s ‘_.$slides.children().children();’ will get nothing about the new slide, but only the old ones.

---

quick fix to make everything works is, when adding a slide, just wrap 2 extra div on it.

$slider.slick('slickAdd', '<div class="slick-item">added</div>') change to $slider.slick('slickAdd', '<div><div><div class="slick-item">added</div></div></div>')

[zedee]

Same issue here.

@mktcode @Prashanth05 @sebfie @gonssal @noido : I’ve found a workaround, but first also a bit more about what I’ve found in order to shed some lights to fix this:

I’ve noticed reading on source code, when a breakpoint was achieved, internal function _.refresh(initial) is called, and I think it has something to do with component “demount” and “mount” each time _.refresh(initial) is called. Something that is related to your initial DOM structure.

In my case, first I have a server-side rendered page, with all preloaded items which I will add to slick (I initialize it on document.ready). Then when I reach some threshold, I load via AJAX a html view then append it via slickAdd

Observing what happened on DOM structure, I’ve noticed that all html added with slickAdd, when you get into some thresholds, is not appended on the DOM correctly. For some reason my workaround was the following:

My original HTML structure (first page load, init slick here):

<div id="my-slider">
    <div class="article-slide"><!-- some content here --></div>
    <div class="article-slide"><!-- some content here --></div>
    <div class="article-slide"><!-- some content here --></div>
</div>

My AJAX HTML string response before the workaround (string that I append via slickAdd):

    <div class="article-slide"><!-- some content here --></div>
    <div class="article-slide"><!-- some content here --></div>
    <div class="article-slide"><!-- some content here --></div>

My AJAX HTML response after (modified my view and this time, I append this. It now works correctly, no more breakpoint issues):

    <div>
        <div>
            <div class="article-slide"><!-- some content here --></div>
            <div class="article-slide"><!-- some content here --></div>
            <div class="article-slide"><!-- some content here --></div>
        </div>
    </div>

I have no idea why, haven’t go deeper into slick source code, but I suspect there’s something related to what is selected via DOM and parent/child html node issues.