slick: 1.4.x callback methods - on init event not working

New callback events

Is anyone else having an issue with the init event? I’m having trouble getting init to work at all.

With the following code the beforeChange and afterChange events work, but the init event doesn’t fire at all. I have tried version 1.4.0 and 1.4.1

My code looks like this:

    $('.slider')
        .on('init', function(event, slick){
            // let's do this after we init the banner slider
            ...
            console.log('slider was initialized');
        })
        .on('beforeChange', function(event, slick, currentSlide, nextSlide){
            // then let's do this before changing slides
            ...
            console.log('before change');
        })
        .on('afterChange', function(event, slick, currentSlide, nextSlide){
            // finally let's do this after changing slides
            ...
            console.log('after change');
        });

Using 1.3.9 and the older callback method the onInit works

    $('.slider').slick({
        autoplay: true,
        autoplaySpeed: 5000,
        slidesToShow: 1,
        slidesToScroll: 1,
        dots: true,
        lazyLoad: 'ondemand',
        onInit: function() {
            // let's do this after we init the banner slider
            ...
            console.log('slider was initialized');
        },
        onBeforeChange: function() {
            // then let's do this before changing slides
            ...
            console.log('before change');
        },
        onAfterChange: function() {
            // finally let's do this after changing slides
            ...
            console.log('after change');
        }
    });

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Reactions: 1
  • Comments: 22 (3 by maintainers)

Most upvoted comments

You need to bind it before calling slick on the element

is there an event after slick is ready ?

in the init callback slick is not available yet 😃

@edyken77 you need to bind init function before ‘slick’ object initialization . For example $(‘.slider’).on(‘init’, function(event, slick){ console.log(‘slider was initialized’); }); $(‘.slider’).slick({ autoplay: true, autoplaySpeed: 5000, dots: true, lazyLoad: ‘ondemand’ });

You’re still binding the event after initializing slick. It needs to happen prior.

It’s all good homie. Happy slickin

Looking at the code, it appears that “edge” only works with swiping, and not when you use buttons.

SImple:

if($(".NAME-YOU-SLICK.slick-initialized").length == 1){
console.log('INITIALIZE');
}