Slick slider, как включить ajax-loader.gif?

Question

[Альберт]

Slick js и slick css файлы подключены через cdn.
В slick-theme.css есть следующий код:

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

Положил это ajax-loader.gif в корень. Включил ленивую загрузку lazyLoad: "ondemand". Ожидалось что пока файл не загрузился будет крутиться этот лоадер, а вместе него имеем просто пустой квадрат. Вопрос как сделать так чтобы отображался этот лоадер либо вообще ничего не отображалось пока файлы не загрузились.

Comments

[Valeron Sergeev]

./ будет брать в той папке, где лежит сам slick-theme.css

[Альберт]

slick-theme у меня не хранится, загружается через

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">

[Евгения Чернова]

А то что класс slick-loading добавляется скриптом slick карусели вас не смущает?
Пока скрипт не загрузится -> не будет класса ->не будет картинки, для которой класс прописан.

[William]

что за чепуху тут понаписали... боже...
gif лоадер не отображается, потому что класс указан неверный, причем на github тоже неверный

вместо

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

нужно

img.slick-loading
{
    background: url('./ajax-loader.gif') center center no-repeat;
}