Slick: Slick Init - Cannot pause slider

[DeanWhitehouse]

Hello,

When trying to pause the slider within the init listener the "slick('slickPause')" method doesn't work with the error

Uncaught TypeError: Cannot read property 'slickPause' of undefined

An example piece of code is:

var opts = {
            autoplay: true,
            autoplaySpeed: 5000,
            speed: 750,
            fade: true,
            arrows: false,
            appendDots: $('.nav-wrap div'),
            dots: true,
};

$(elem).on('init', function(event, slick){
            var slider = slick.$slider;
            slider.slick('slickPause');
});

$(elem).slick(opts);

It seems like you need a 'ready' event or similar to help resolve this?

Thanks,
Dean

[shrmnk]

If you want to not start the autoplay upon init, then set autoplay: false.

You can then call a slickSetOption later to start the autoplay

Probably something like

$(elem).slick('slickSetOption', 'autoplay', true, true);

[DeanWhitehouse]

Hello,

Yes but the init method should be when slick is available and it isn't.

Cheers

[shrmnk]

init event can be hooked before slick is available.

I have working code which does this:

settings.$element.on('init', this.onInit);
settings.$element.on('beforeChange', this.beforeChange);
settings.$element.on('afterChange', this.afterChange);

settings.$element.slick({
    arrows         : settings.arrows,
    dots           : settings.dots,
    adaptiveHeight : settings.fullscreen ? false : settings.adaptiveHeight,
    draggable      : false,
    fade           : true,
    autoplay       : {{ settings.hero_home_auto }},
    autoplaySpeed  : {{ settings.home_hero_auto_speed }}
});

onInit = function(event, slick) {
    alert('onInit works!');
}

this.onInit is still called perfectly fine upon my $element getting .slick-ed.

[carloschneider]

I know this is very old issue. But, the slickPause and slickPlay methods only works correctly when the property pauseOnHover is false.

[simeydotme]

@carloschneider That's fixed on master, please hang tight for a new release :)

[daslicht]

hm , i still have the issue with version:
"slick-carousel": "^1.6.0",
If I initialize slick after the init callback.
.slick('slickPause'); always returns :

Uncaught TypeError: Cannot read property 'slickPause' of undefined

see:
http://jsfiddle.net/daslicht/9k9soqea/3/

[daslicht]

Looks like init != ready:

http://jsfiddle.net/daslicht/tmLxk31t/

[JumpLink]

Run $slider.slick('slickPause'); just after the initialization seems to be working: https://jsfiddle.net/yzxyh435/1/

So, $slider.slick({...}); seems to be sequential and not asynchronous and to wait for the event does not seem to be necessary.

Contradict someone?

[thielpeter]

Its dirty but works :/

$slider.on('init',function(event, slick){
  setTimeout(function(){$slider.slick('slickPause');}, 1);
});

$slider.slick({
  autoplay: true,
  pauseOnHover: false
});