Slick: ajax-loader.gif not showing

Created on 27 Oct 2014 · 8Comments · Source: kenwheeler/slick

I apologize ahead of time if this is not really an issue. I can't seem to see the ajax-loader spinner at all in my pages or on http://kenwheeler.github.io/slick/. I have even tried throttling my connection speed.

Slick.js's css targets

.slick-loading .slick-list { background: #fff url("./ajax-loader.gif") center center no-repeat; }

but .slick-loading isn't applied to the top level html element, .slick-loading is applied only to the image that is being loaded.

I have also tried with the latest 1.3.13

Is slick.js supposed to add a .slick-loading class to the top level slider html element? If so, I must be missing it? Maybe the class isn't added so the spinner isn't appearing?

Source

gmclelland

Most helpful comment

If you are including slicks .scss theme file. You can overwrite the variable $slick-loader-path to a custom path.

iampuma on 22 Mar 2017

👍5

All 8 comments

JsFiddle?

kenwheeler on 28 Oct 2014

http://jsfiddle.net/5o8f3t8v/4/

If you drag a slide over half way, you see the spinner GIF, but if you use the next/prev buttons you don't get chance to see the spinners.

Note the new CSS...

img.slick-loading { background: #fff url('http://www.ajaxload.info/images/exemples/30.gif') center center no-repeat; }

The default code doesn't display a spinner...

.slick-loading .slick-list { background: #fff url('http://www.ajaxload.info/images/exemples/30.gif') center center no-repeat; }

HTH

xcartmods on 3 Feb 2015

Not sure why this is closed, the problem hasn't been fixed has it?

kush1960 on 10 Mar 2015

+1 would like to fix it too... any help very much appreciated!

jan1980 on 4 Jun 2015

+1 - Same issue here. Any support for showing an ajax loader while an image is lazy loading? We have users falling off because they don't think there is an image there.

wmelton on 11 Nov 2015

Please check this following link guys...
https://github.com/kenwheeler/slick/issues/779

Subhojit1992 on 14 Jan 2016

If you are including slicks .scss theme file. You can overwrite the variable $slick-loader-path to a custom path.

iampuma on 22 Mar 2017

👍5

Looking at the code the ajax-loader only seems to come into effect when using lazy-loading.
Since the $slick-loader-path variable in the css depends on the slick-loading, see:
https://github.com/kenwheeler/slick/blob/a2aa3fec335c50aceb58f6ef6d22df8e5f3238e1/slick/slick-theme.less#L20

which only gets set if the lazy-data attribute is present on the image, see:
https://github.com/kenwheeler/slick/blob/a2aa3fec335c50aceb58f6ef6d22df8e5f3238e1/slick/slick.js#L536