Slick: Calling a method right after the "init" event causes an error

[Jiia]

I just spent some hours wondering why I couldn't call any slick functions. I had my code written up like this:

$slider.on("init", function() {
    // a hack to solve a conflict between plugins, not important
    $slider.find("[data-slick-index='-1'] img").addClass("lazyload");
    $slider.slick("slickGoTo", 1, true);
}

$slider.slick();

Unfortunately this didn't work. It seems that slick calls the init event before the methods are ready to be called. But it doesn't have any event that fires once it's completely loaded. The error I got was:

Cannot read property "slickGoTo" of undefined

http://jsfiddle.net/fypoz9eu/5/

[Jiia]

Even waiting for the "slick-initialized" class to be added didn't work. Had to do a try-catch loop:

function slideToFirst() {
    try {
        $currentSlider.slick("slickGoTo", 0, true);
    }
    catch(error) {
        setTimeout(slideToFirst, 100);
        return;
    }

    doSomethingWhenReady();

}

[ahmadalfy]

Confirmed.

[gambala]

Having it too

[gausarts]

This looks good:
https://jsfiddle.net/fypoz9eu/10/

Perhaps because the OP loaded the missing JS?
http://kamara.fi/x/jenni/resources/plugins/slick/slick.min.js

at:
https://jsfiddle.net/fypoz9eu/5/

[gausarts]

Oops, sorry, I missed the mentioned methods in the example, but the missing JS part is true ;)

[huzjakd]

+1

[andypillip]

I'm relying on the DOM reconstructions inside the div.slick-slider to be finished when init is fired.

But actually it's not the case.

I'm appending another a.slick-arrow (rewind) to .slick-slider on init, but it ends up inside the div.slick-track, because of DOM reconstructions happening after init got fired.

I put a breakpoint on the line that appends my arrow, and inspecting the slick element, still all slides are direct children of the div.slick-slider.

Also relying on .slick-initialized in CSS will have weird results, like #2604

[gavinlynch]

anyone still dealing with this: I seemed to have some success with wrapping my API call in a setTimeout(method, 0). Bummer of a bug.

https://jsfiddle.net/m4an6mzo/

[projer-zz]

setTimeout(method, 0) fixed the problem for me. Problem still there.

[tortilaman]

@gausarts first link worked for me. Specifically, the event is init.slick, not init

[normanfrancis]

@gavinlynch solution worked for me

[hugoburguete]

Although this works, it's not an actual solution. Ideally, init should run after all events are available.