Zenn
🦔

Splide.jsのカスタマイズについて

2024/01/21に公開
JavaScript
PHP
tech

基本のスライド

まずはSplide.jsを用いた、基本的なスライドの実装方法を説明します。
HTMLは下記のようになります。

<section id="image-carousel" class="splide" aria-label="お気に入りの写真">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">
                <img src="image01.jpg" alt="">
            </li>
            <li class="splide__slide">
                <img src="image02.jpg" alt="">
            </li>
            <li class="splide__slide">
                <img src="image03.jpg" alt="">
            </li>
        </ul>
    </div>
</section>

CSSは下記のようになります。

.splide__slide img {
    width: 100%;
    height: auto;
}

JavaScripは下記のようになります。
もし、<body>タグの直前で<script>を読み込むのであればDOMContentLoadedは必要ありません。

<script>
    document.addEventListener( 'DOMContentLoaded', function () {
        new Splide( '#image-carousel' ).mount();
    } );
</script>

結果 :

画像とテキストをセットにしたい場合

例 :

HTMLは下記のようになります。

<div id="image-carousel" class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">
                <img src="image01.jpg">
                <div>Description 01</div>
            </li>
            <li class="splide__slide">
                <img src="image02.jpg">
                <div>Description 02</div>
            </li>
        </ul>
    </div>
</div>

JavaScriptは基本の記述から変更する必要はありません。

テキスト部分は<div>タグじゃなくて<p>タグ等でも問題ありません。
また、classを設定して自由にスタイルを変更することもできます。

オプションの設定方法 [例]

例 :

const option1 = {
    autoplay: true, // 自動再生
    interval: 4000, // 自動再生の間隔
    perMove: 1, // 何枚ずつ動くか
    type: "loop", // スライドがループし続ける
};

const options2 = {
    perPage: 3, // スライダーのviewの枚数
    trimSpace: true, //余白の削除
    pagination: false, //ページネーション削除
};

if (document.querySelector(".splide-1")) {
    const splide = new Splide(".splide-1", option1);
    splide.mount();
}
if (document.querySelector('.splide-2')) {
    const splideEvent = new Splide(".splide-2", options2);
    splideEvent.mount();
}

上記の例ではオプションを変数に代入して、Splideのインスタンスを生成するときに変数を呼び出しています。そうすることで、どのスライドでどのオプションを使うかがわかりやすくなります。
※この例では、IDではなくclassで対象要素を指定しています。

下記にあるSplideのオプションを見ながら自由に設定ができます。
オプション

Discussion