スライダー（カルーセル）ライブラリのもうひとつの選択肢？【splide.js】を使う方法

Webサイト制作をしている時、スライダー（カルーセル）が必要だ、となった時。
たいていの場合、なんらかのライブラリを導入するかと思います。
（もちろん、そこにリソースをさけるなら「自作する」というつよつよな方もいるかとは思いますが）

これは実際の制作現場でも、リソースの関係（…や、車輪の再発明理論）でだいたいそうなります。

で、採用されるのがご存じ、Swiper.js になるケースがほとんどです。VueやReactとの相性も抜群で、ちゃんと専用コンポーネントも用意されてますからね。
※ちなみにslickは、jQuery依存な時点でここ数年では候補から外れるケースが多い印象です

~~…なのですが。最近、もう一つの選択肢があるかも？~~と思ったので、この記事を書いてみました。
（追記：記事の末尾に記載の通りちょっと気になる点があり一旦、上の一行、取り消し線をつけました）

名前はSplide

ライブラリの名前はSplide。詳細情報は次のとおりになります。

【公式サイト】
https://ja.splidejs.com/【Githubリポジトリ】
Splidejs / splide【Splideの著作権表記】
Splidejs / splide – Copyright (c) Naotoshi Fujita – https://ja.splidejs.com/
License – https://github.com/Splidejs/splide?tab=MIT-1-ov-file#readme (The MIT License (MIT)),
Copyright (c) 2022 Naotoshi Fujita

制作者は日本人の方のようで、公式サイトの情報によれば、CDNの利用者数は実に月間3億ヒット以上とのことです。
※ちなみに著作権表記として、実際は (c) 2022 – present（presentは現在進行形で有効の意味）、といったところでしょうか。

使い方

こちらのページから本体をDLして、
JS本体(DLしたzip内のパス: dist/js/splide.min.js)
CSS(DLしたzip内のパス: dist/css/splide.min.css)
をそれぞれ読み込みます。

CSSはheadタグ内、
JS本体はbodyタグ直前での読み込みが良さそうです。
（※特に、JS側はbodyタグ直前でない場合、公式のこのページによると初期化の際の記述が少し長くなるそうです）。

次に、そのままでは画像サイズの設定が十分ではないため、公式のこのページの情報を元に、CSSを追記します。
※もちろん、実際はimgタグ直参照ではなく、imgタグにclass名をつけての参照が何かと望ましいと思います

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

サンプルコード全体としては次の形で動作します。（※CSSのパス、JSのパスは適宜おきかえてください。）

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Splide Sample</title>
    <link rel="stylesheet" href="./splide.min.css">
    <link rel="preload" as="image" href="https://picsum.photos/id/60/800/370" type="image/jpeg" />
    <link rel="preload" as="image" href="https://picsum.photos/id/62/800/370" type="image/jpeg" />
    <link rel="preload" as="image" href="https://picsum.photos/id/202/800/370" type="image/jpeg" />
  </head>
  <body>
    <div class="splide">
      <div class="splide__track">
        <ul class="splide__list">
          <li class="splide__slide"><img src="https://picsum.photos/id/62/800/370" alt="one"></li>
          <li class="splide__slide"><img src="https://picsum.photos/id/202/800/370" alt="two"></li>
          <li class="splide__slide"><img src="https://picsum.photos/id/60/800/370" alt="three"></li>
        </ul>
      </div>
    </div>
    <script src="./splide.min.js"></script>
    <script>
      new Splide('.splide', {
        type    : 'loop'
      }).mount();
    </script>  
  </body>
</html>

ちなみに、上記だけではブラウザ全体に表示されるため、実際の使用の際は .splide か、それをラップする親要素に次のようなCSSを加えることで、サイズ調整や位置調整ができます。

.splide {
  margin: 0 auto;
  width: 800px;
}
/* 上記は .splide 直指定でなく、それをラップする親要素の方が取り回しやすいかもしれません */

CDNでの使用方法、npmでのインストール方法

公式のこちらのページに、それぞれインストール方法の記載があります。

そのほかオプションなど

公式のこちらのページに、さまざまなオプションの記載があります。

具体的には、この記事内のサンプルコードの中の次の部分のように、オプションを指定します。

<script>
new Splide('.splide', {
  type: 'loop'
}).mount();
</script>

↑この例では、type: ‘loop’ オプションを加えています。

軽量のため、パフォーマンスを優先するなら選択肢として候補になるかも？

公式のこちらのページに記載がある通り、こちらのsplideは全体で29kbという、軽量なライブラリです。

公式サイトのファーストビュー内にも
「Lighthouseのエラーもありません」と記載のある通り、
ページ速度を優先したい場合、~~他のライブラリの代わりの選択肢として候補になるかもしれません。~~
（追記：記事の末尾に記載の通り、ちょっと気になる点もあります）

この記事のまとめと、気になる点がひとつ

こちらのSplideですが、一つだけ気になる点があります。

それは、こちらのライブラリ、最新バージョンのリリースが「2022年」である、という点です。

それ以降、（この記事を書いている時点では）新しいバージョンのリリースが行われていない模様、という事を
ここに記載しておきます。
（※これは気にしない方は気にしない、気になる方は気になる。という部分かと思いますので、この記載に留めておきます）

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。

この記事をシェアする：