「Infinite Scroll」で読み込んだ後の要素で「slick」が動作しない時の解決方法について

久々にハマったので備忘録です。。
掲題の通りなのですが、
jQueryプラグイン「Infinite Scroll」

を使ってページを無限読み込みさせたうえで、
その要素を「Slick」

で動かしたいときに、
読み込んだ後の要素でSlickが動かない現象にぶち当たりました。。

まずこんな感じで書いてみたのですが

これだと、slickは表示されているDOM要素にかかるので、
後から読み込んだものには適用されないいんですよね。。

こんな感じになっちゃいます泣。。

色々調べてみたところ、どうやら同じような現象でハマっている人が多い模様。。

「Infinite Scroll」を動かした後に「Slick」を動かす

やらないといけないこととしては

・「Infinite Scroll」を動かした後に「Slick」を動かす

ってことなのですが、これが意外にややこしい。というか、

・「Infinite Scroll」を動かした後に「Slick」を動かす

だけだと、最初にSlickが動かないので、正確に言うと

・「Slick」を回して
・「Infinite Scroll」を回して
・もう一回「Slick」を回す

って感じなのですが、これだと「Slick」がダブって動かないため

・「Slick」を回して
・「Infinite Scroll」を回して
・一回「Slick」を初期化して
・再度「Slick」を回す

って処理が必要になるようでした。

前置きが長くなりましたが、解消したやつがこれです。

書き方はこんな感じ。。

ちょっと馬鹿っぽい書き方だけど、とりあえず動きます苦笑。
もっと良い書き方あるかもしれませんので、
改良したものを誰かブログで書いてあげてください。

現時点で私が参考にしたブログはこちら

どなたかの参考になれば幸いです。
そして、私の屍を越えてゆけ・・・。
それでは。。

 役に立った 3

役に立ったボタン設置してみました。是非押していってくださいm(__)m

この記事を書いた人

mako110

原宿でWEBディレクターをやっています。
WEB業界に携わって約15年。独立して7年目です。
自分らしく、働きやすく、周りの人の役に立つ。
そんな仕事をゆるゆるとやっています。