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

[me3design]

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');
        }
    });

[kenwheeler]

You need to bind it before calling slick on the element

[me3design]

Hi Ken, thanks for the quick reply. I realize my code above made it look like I didn't bind slick before the calling the events but I was doing that.
I was doing this:

    $('.slider').slick({
    autoplay: true,
    autoplaySpeed: 5000,
    dots: true,
    lazyLoad: 'ondemand'
    });
    $('.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');
        });

And also tried this:

    $('.slider').slick({
        autoplay: true,
        autoplaySpeed: 5000,
        dots: true,
        lazyLoad: 'ondemand'
        })
        .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');
        });

I'm still unable to get the on init event to work at all. The beforeChange and afterChange events work perfectly. I appreciate you looking into it and for making such a great slider. I have used it on numerous sites and think it is the best one out there.

[kenwheeler]

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

[me3design]

Got it! Dang, sorry I was so thick on this issue. Appreciate your help.

[kenwheeler]

It's all good homie. Happy slickin

[edyken77]

Can you provide a working example? I can't seem to set an on int function because 'slick' is not defined yet.

[woodpig07]

@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'
});

[edyken77]

I see, I did have it bound before the object but my issue was the .on init function had been trying to reference .slick to do something (which will return undefined). Thanks!

[oliverbenns]

This caught me out too - thanks!

[adbatista]

I'm having a similar problem, this is my script;

var $carousel = $("[data-carousel]");

$carousel.on('edge', function(event, slick, direction){
  console.log("edge");
});

$carousel.slick({
  slidesToShow: 4,
  slidesToScroll: 4,
  accessibility: false,
  draggable: false,
  infinite: false,
  prevArrow: $("[data-carousel-prev]"),
  nextArrow: $("[data-carousel-next]"),
  responsive: [
    {
      breakpoint: 1370,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    }
  ]
});

but I'm getting nothing, when reaching the edge

[chadhost]

@adbatista Did you figure out your issue with the edge? I'm also having this problem.

[BASICjfisher]

+1 for "edge" event not firing.

[masi]

Ok, got it. A hint on how to use the init event in the documentation is appreciated.

[tlg-chris-stgermain]

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

[daslicht]

is there an event after slick is ready ?

in the init callback slick is not available yet :)

[bux23]

solved for me

[sandeep2244]

@tlg-chris-stgermain how to add event on button for edge and direction ??

[zdimaz]

Init *not work

[GGget]

the similar issue to me ,some code:
$('.slick').on('init', function (el, slick, currentSlide) {
console.log(el) // => Object :)
console.log(currentSlide) // =>undefined 爻(
})
$('.slick').slick()
my init event work success for The first two parameters, but i can‘t get the currentSlide ,it shows "undefined"

[febdao]

@GGget
There is no currentSlide argument with the init event, so you can't get it.

[belai87]

@me3design
You can initialize it like this

$('.slider').slick({
infinite: true,
......
init: InitSlider()
});

function initSlider(){
console.log('INITIALIZE');
}