Slick: Feature Request: Method to check if slick is loaded.

[jimmymorris]

I would really <3 a method to check if the slick slider is loaded or not.

[iainhenderson]

What do you mean by "slider is loaded"? - That the slick plugin has successfully loaded, or that all images in the slider have finished loading? If it's the former, you can check for the existence of the jquery plugin like so:

var isSlickLoaded = (typeof $.fn.Slick !== 'undefined');

If want to know if the images are loaded I'd suggest taking a look at the jQuery Images loaded plugin https://github.com/desandro/imagesloaded

[kenwheeler]

Every loaded slick has a class slick-initialized.

[mudisujit]

Hi @kenwheeler ,
By default my accordion is close when I click the accordion the slider look messed. The slider under the accoudion. Any Idea?

[cameronjonesweb]

@mudisujit that's because when it initialises, the slider is hidden so it has no height. You can fix it by only initialising the slider once the accordion panel opens

[gozarmanuariana]

Hi @kenwheeler,
I want to override the width of the slick-slides and also make the slick container visible only when slick is in its final form. The slick container could be seen if user hovers a button.
Everything works great if users hover the button after the page is completely loaded because my width settings are taken into account, but if user hovers the button before that, the slick design will be broken because my width settings are overriden by slick's one.

I've debugged the problem and it seems that in the $(window).load(function() {} the slick container looks ok, the width of the slick-slides is the one I set, but when the debugger leaves the .load method, slicks overrides my widths.

My currently solution is to setTimeout of 2 seconds and then set the width of the slick-slides.

I would like to know how to fix this in a smarter way. I thought that a method to check if slick is completely loaded would help.

Thanks

[sergx]

if(typeof $.fn.Slick === 'undefined'){
    document.write('<script src="js/slick.min.js">\x3C/script>');
    document.write('<link href="css/slick.css" rel="stylesheet">');
    document.write('<link href="css/slick-theme.css" rel="stylesheet">');
  }

[dnordby]

My use-case for this is an embedded app: I've built an app that on load does not display a slider. So by the time I route to a component that has a slider, slick.js.min is already loaded in. Great, no problems!

However, the app is light enough that if a user was to refresh that route, my app reloads faster than slick.js.min.

A callback to say "slick is loaded now!" would allow me to test (and re-test as needed) for if slick was done loading, and then execute my slider. As it stands, I just get the fun "TypeError: e(...).slick is not a function" which is sad.

[JefferyHus]

@dnordby All you have to do (which is not recommended but works). Create an interval and set your function to keep looking for slick existence in your document.

function testimonialsSlick() {
    if (typeof $.fn.slick == 'function') {
      // do your work here
     ...
     // clear the interval
     window.clearInterval(slickInterval)
   }
}
var slickInterval = window.setInterval(testimonialsSlick, 300);

You can customize it as much as you want to make sure the interval won't run forever and stack the memory of your visitors. Another recommended solution is to use RequireJS.

[dnordby]

@JefferyHus this is of course what I wound up doing...I liked having the app so lightweight that I decided not to use another library just to implement a simple listener I could write myself. Just kind of too bad there’s not (currently! 🤞🏻) built in support for this.