JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法

外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描写し、それらに対して「slick」プラグインでスライダーを実行したかった。また、それとは別に先にスライダーが実行されているページに対して動的に画像を追加したかった。以下に対応方法をメモ。

slick

公式サイト

https://kenwheeler.github.io/slick/

CDN

CDNで使う場合は以下を記述する。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">

対応方法

空の要素に対して画像を追加してスライダー実行する場合

<div id="slider"></div>

<script>
$(function(){
    //#slider内に画像を追加
    for( let i = 1; i <= 5; i++ ){
        $(`#slider`).append(`<div><img src="./img/00${i}.jpg"></div>`);
    }
    //slick実行
    $(`#slider`).slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        centerMode: true,
        variableWidth: true
    });
});
</script>

既に実行されているスライダーに対して画像を追加する場合

<div id="slider">
    <div><img src="./img/001.jpg"></div>
    <div><img src="./img/002.jpg"></div>
    <div><img src="./img/003.jpg"></div>
</div>

<script>
$(function(){
    const slickFunc = () => {
        $(`#slider`).slick({
            dots: true,
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            centerMode: true,
            variableWidth: true
        });
    }

    slickFunc();

    //slick解除
    $('#slider').slick('unslick');

    //#slider内に画像を追加
    for( let i = 4; i <= 5; i++ ){
        $(`#slider`).append(`<div><img src="./img/00${i}.jpg"></div>`);
    }

    //slick実行
    slickFunc();
});
</script>

解説等

空の要素に対して画像を追加してスライダー実行する場合は特に注意点は無く、普通に画像を追加してslickを起動すれば良い。

既に実行されているスライダーに対して画像を追加する場合は一旦スライダーを解除してから画像を追加し、改めてslickを起動させる必要がある点に注意する。