slick carousel 'init' function doesn't work

Question

I've used slick slider recently, but I need to add a script after slick carousel has been initalised.
I have tried the below code
DEMO codepen: https://codepen.io/kelvinspaces/pen/bGEXJaG
Any ideas as to how I run the script after the slider has been load completely?

//Slick Slider    
$('.slider-container').slick({
      infinite: true,
      slidesToShow: 6,
      slidesToScroll: 6
    });
    

    $('.slider-container').on('init', function (event, slick) {
      alert('test');
      $('.test').css('background-color', 'red'); //RUN the script after slick slider have load completly.
    });

Does anyone have any idea? or anyone can suggest a good performance and can fully customize carousel for me?

Answer 1

Your listener needs to be placed before you initialise your slick slider. Otherwise the listener is never called because you've asked it to listen after the event has ran. That is, when you init your slick slider, your listener is not currently bound.

// Bind init event listener function
$('.slider-container').on('init', function (event, slick) {

     code here...

});

// Init your slick slider
$('.slider-container').slick({

     other code here...

});

It should be as above.