jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「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">

異なるバージョンを利用したい場合は以下から探す。

https://cdnjs.com/libraries/slick-carousel

サンプル

https://taitan916.info/sample/slick/

ソースコード

<style>
#slider{
    .slick-arrow{
        z-index: 2;
        top: 100px;
    }
    .slick-prev{
        left: 1%;
    }
    .slick-next{
        right: 1%;
    }
}
</style>

<main>
    <section>
        <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><img src="./img/004.jpg"></div>
            <div><img src="./img/005.jpg"></div>
        </div>
    </section>
</main>

<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.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<script>
$(function(){
    $(`#slider`).slick({
        dots: true,
        infinite: true,
        slidesToShow: 1,
        centerMode: true,
        variableWidth: true
    });
});
</script>

オプションについて

各種オプション設定については公式のこちらのページを参照すること。