[splide.js]グリッド表示できるスライダーの構築

触りだけ。

やりたいこと
前提
準備
組む
動かす
オプション関係

やりたいこと

1ページにつき複数枚の要素を配置したスライドショーを作りたい。

カスタマイズすればなんとかなるよってものもあるんだけど、正攻法じゃない感じばっかり目についたんで何かないかと探したら「splide.js」にたどり着いた。

英語読めないし、そんなに専門的な知識もないし、参考記事が少ないので苦労した。

前提

サーバーにインストールしないで、CDNで組む。

Splide - The lightweight, flexible and accessible slider/carousel

Splide is a lightweight, flexible and accessible slider/carousel, written in TypeScript. No dependencies, no Lighthouse ...

準備

jsとcssを読み込む。本家がCDNに上げてくれてるので、それをそのまま使う。

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-grid@latest/dist/js/splide-extension-grid.min.js"></script>

本体と、拡張機能でグリッド構成ができるやつを読み込む。

<head>に突っ込んでOK。

組む

<div class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide"><img src="img/img01.jpg" alt=""></li>
            <li class="splide__slide"><img src="img/img01.jpg" alt=""></li>
            <li class="splide__slide"><img src="img/img01.jpg" alt=""></li>
            <li class="splide__slide"><img src="img/img01.jpg" alt=""></li>
            <li class="splide__slide"><img src="img/img01.jpg" alt=""></li>
        </ul>
    </div>
</div>

<ul>は<div>でも構わないけど、classは維持する。

一番外側の.splideがトリガーになるんで、同一ページ上に複数設置したい場合は識別できるようにclassとかidを足す。

動かす

    <script>
        document.addEventListener( 'DOMContentLoaded', function () {
            new Splide('.splide',{
                type: 'fade',
                perPage: 1,
                perMove: 1,
                grid: {
                    dimensions: [ [ 3, 3 ],[ 3, 3 ],[ 3, 3 ]],
                    gap: {
                        row: '1em',
                        col: '1em'
                    }
                },
            }).mount( window.splide.Extensions);
        });
    </script>

これで1ページに画像を3*3で配置したスライドが完成する。

dimensionsの中をいじれば各ページの配置を変更できる。配置した要素と数が合わないと崩れるんで、凝ったことしたい場合はちゃんとやらないといけないです。

オプション関係

表示できる環境が整ったんで、オプションをいじる余裕が生まれる。

https://splidejs.com/options/

動けば作例を見て、試して、理解ができるようになる。

Splide.jsでかんたん可変グリッドスライダー

Splide.jsとは純粋なJSとCSSのみで書かれているスライダー／カルーセルです。jQuery非依存、軽…

JavaScriptのSplideによるスライダー(カルーセル)作成方法

目次SplideとはSplideによるスライダー作成方法Splideの画像をpictureタグにするSplideの画像の左右に余白を追加一画面に複数表示複数表示されていても移動は1つずつ複数表示の最初は中央に表示自動再生 …

英語ができない人のために、例えばこんな感じ。

    <script>
        document.addEventListener( 'DOMContentLoaded', function () {
            new Splide('.splide',{
                type: 'fade', //フェードで切り替え
                rewind: true, //無限ループ
                drag: false, //ドラッグ禁止
                autoplay: true, //自動再生する
                arrows: false, //矢印非表示
                pagination: false, //ページャー非表示
                perPage: 1, //可視領域に1ページだけ配置
                perMove: 1, //ページ送り量
                grid: {
                    dimensions: [ [ 3, 3 ],[ 3, 3 ],[ 3, 3 ]], //縦横配置数
                    gap: { //配置した際の余白
                        row: '1em',
                        col: '1em'
                    }
                },
                breakpoints:{ //ブレイクポイント
                    767.98: { //max-widthを指定。小数点以下の数値も動作。
                        grid: {
                            dimensions: [ [ 3, 3 ],[ 3, 3 ],[ 3, 3 ]],
                            gap: {
                                row: '4px',
                                col: '4px'
                            }
                        },
                    }
                }
            }).mount( window.splide.Extensions);
        });
    </script>

最低限のやりたいことができたので今回は良しとする。