CODEWITHSUNDEEP
javascriptjqueryslick.jsjquery-events
Dean Whitehouse
Dean Whitehouse

Reputation: 894

Slick Init - slickPause undefined

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 there should be a ready event but there isn't, any idea on how to get around this?

The purpose of needing this is to detect if the first slide is video, if so pause the slider and play the video and then continue.

Upvotes: 1

Views: 4872

Answers (3)

Stackoverfall
Stackoverfall

Reputation: 1202

Above not working so that's why I am posting my solution

var slick_options = {
        dots: false,
        infinite: true,
        speed: 800,
        autoplaySpeed:800,
        adaptiveHeight: true,
        autoplay:true
    };

    $('.slick-slider').slick(slick_options);


    $('.slick-slider-play-pause-btn').click(function() {
        var this_play_pause_ele = $(this);
        var is_has_play_class = this_play_pause_ele.hasClass('is-paused');
        var slick_options;
        $('.slick-slider').slick('unslick');


        if(is_has_play_class==true){
            this_play_pause_ele.removeClass('is-paused');
            this_play_pause_ele.html('Pause');

            slick_options = {
                dots: false,
                infinite: true,
                speed: 800,
                autoplaySpeed:800,
                adaptiveHeight: true,
                autoplay:true
            };
            $('.slick-slider').slick(slick_options);
        } else {
            this_play_pause_ele.addClass('is-paused');

            this_play_pause_ele.html('Play');
            slick_options = {
                dots: false,
                infinite: false,
                speed: 300000000000,
                autoplaySpeed:300000000000,
                adaptiveHeight: true,
                autoplay:false
            };
            $('.slick-slider').slick(slick_options);
        }
    });

Upvotes: 0

SteCgn
SteCgn

Reputation: 11

For me it seems, the pause function is working, BUT, while leaving the slide area with the mouse the autoplay is re-activated again...

I solved this issue by increasing the autoplaySpeed - means, autoplay will still be on, but it will really take a long time till the next slide will come...

$sliderslickSetOption("autoplay",false,false);
$sliderslickSetOption("autoplaySpeed",10000000,false);

Upvotes: 1

Stu Furlong
Stu Furlong

Reputation: 3629

I had a tough time with this, it seems something is wrong with init or perhaps I'm not understanding it fully but slick pause seems to work fine in other circumstances (such as "afterChange").

Perhaps bring this up as an issue to Ken Wheeler?

Based on what you said you're trying to do though, maybe you could try it a different way a little more outside of slick? 

$(elem).each(function(){
    var $this = $(this);

    $this.slick(opts);

    var iframe = $this.find('.slick-slide:first-child').find('iframe');

    if(iframe.length > 0){
        $this.slick('slickPause');
    }  
});

Codepen

Upvotes: 2

Related Questions