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

投稿日 2022年6月29日
更新日 2022年6月30日
著者 mako110
カテゴリー WEBのこと

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

Infinite Scroll

New! JavaScript and jQuery plugin to automatically add next pages.

infinite-scroll.com

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

slick – the last carousel you

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

kenwheeler.github.io

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

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

<script type="text/javascript">
  $(function() {
    $('.slick').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      dots:true,
      autoplay: true,
    });  

var infScroll = new InfiniteScroll( '#article', {
    append: '.post',
    path: '.next_posts_link a',
    hideNav: '.next_posts_link',
    button: '.view-more-button',
    scrollThreshold: false,
    status: '.page-load-status',
    history: 'true',
});  

});
</script>

$(function() {

$('.slick').slick({

slidesToShow: 1,

slidesToScroll: 1,

arrows: false,

dots:true,

autoplay: true,

});

var infScroll = new InfiniteScroll( '#article', {

append: '.post',

path: '.next_posts_link a',

hideNav: '.next_posts_link',

button: '.view-more-button',

scrollThreshold: false,

status: '.page-load-status',

history: 'true',

});

</script>

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

Infinite Scrollとslickの喧嘩

mako110.com

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

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

jQueryプラグイン「Infinite Scroll」を使った次ページの挙動について

jQueryプラグイン「leanmodal」「slick」を使って、画像をクリック→スライダーモーダルが出現、というアクションが行えるギャラリーページを作りました。■ 画像をク…

teratail.com

slick carousel in infinite scroll masonry card works with the first load, but carousels does not work on the new items.

Below is the script for slick carousel. function slider () { var $arrows = $('.arrows'); va…

stackoverflow.com

javascript – スリックスライダーとinfiniteLoad：読み込まれた滑らかなスライダーが表示されない – 初心者向けチュートリアル

この問題は以前に尋ねられましたが、おそらく私のJSの経験不足のために

tutorialmore.com

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

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

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

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

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

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

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

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

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

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

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

Infinite Scrollとslickの共存共栄

mako110.com

書き方はこんな感じ。。

<script type="text/javascript">

$(function() {

//一回slick回す
    $('.slick').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      dots:true,
      autoplay: true,
    });  

//InfiniteScroll回す
var infScroll = new InfiniteScroll( '#article', {
    append: '.post',
    path: '.next_posts_link a',
    hideNav: '.next_posts_link',
    button: '.view-more-button',
    scrollThreshold: false,
    status: '.page-load-status',
    history: 'true',
});

//こっから、読み込み時の処理
infScroll.on( 'append', function() {

//一回初期化する
$('.slick-initialized').slick('unslick');	

//もう一回最初からslick回す
  $(".slick").slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      dots:true,
      autoplay: true,
  });
	
});
});

</script>