javascript - slick carousel 'init' function doesn't work - Stack Overflow

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:
Any ideas as to how I run the script after the slider has been load pletely?

//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 pletly.
    });

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

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 pletely?

//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 pletly.
    });

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

• javascript
• html
• jquery
• web
• slick.js

Share Improve this question Follow edited Aug 2, 2020 at 12:20 ChewySalmon 61477 silver badges2424 bronze badges asked Aug 2, 2020 at 11:32 KelvinKelvin 19933 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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.