【Splide】滑らかに動き続けるスライダーを作る

公開:2023/12/14 更新:2024/04/06

JavaScript

今回は、スライダー系ライブラリのSplideを使って、「滑らかに動き続けるスライダー」を作っていきます。

メジャーなスライダー系のライブラリでSwiperもありますが、v9以降でスライドの枚数に制限があったり、バージョン毎に違いが生じていて対応が少し難しいこともあり、最近は「Splide」を使用することが多いです。
ドキュメントも日本語でとても分かりやすいですし、ループモードの使い心地は「Splide」が優っている印象です！
それでは見ていきましょう。

Splide

今回作るスライダーの最終系

サンプルサイトを新しいタブで開く

Splideの導入

基本の導入

まずは公式サイトのGetting Startedに沿って、Splideを導入しましょう。

Getting Started

以下の３種類があるので、お好きな方法で導入してください。

NPM
ホスティング
CDNの利用

今回はCDNを使用します。CDNのページからコードをコピーして使用します。 splide.min.css はhead タグの中で読み込んで、splide.min.js はbody の閉じタグ前で読み込むと良いかと思います。自身で用意したcssやjsファイルで、CDNの内容を上書きしてカスタムするので、読み込む順番にも注意してください。CDN→自前ファイルの順番に読み込みます。

【CDN】@splidejs/splide

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Splideで滑らかに動き続けるスライダーを作る</title>
  <link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>

  <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
  <script src="./assets/js/script.js"></script>
</body>
</html>

プラグインの導入

スライダーを自動でスクロールさせるためには、AutoScrollエクステンションの導入が必要です。
以下の３種類があるので、お好きな方法で導入してください。

NPM
ホスティング
CDNの利用

今回はCDNを使用します。CDNのページからコードをコピーして使用します。プラグインのCDNもbodyの閉じタグ前で読み込みます。

【CDN】@splidejs/splide-extension-auto-scroll

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Splideで滑らかに動き続けるスライダーを作る</title>
  <link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
  
  <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
  <script src="./assets/js/script.js"></script>
</body>
</html>

滑らかに流れ続けるスライダーを作る

1.HTMLにスライダーを配置

公式サイトGetting Started のHTMLを配置すればOKです。

Getting Started #HTML

<section class="splide" aria-label="滑らかに動き続けるスライダー">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</section>

2.CSSで見栄えを調整する

スライドするコンテンツ部分が.splide__slide になるので、この中に配置したいコンテンツをマークアップしてスタイルを調整してください。

今回はシンプルにテキストだけ配置して、スライドの見栄えを整えておきます。

スタイルを当てる時の注意

スライドの大きさ
スライド間の余白

上記のような、スライダーのオプションで指定できる項目は、JSのオプションから指定する方が良いです。
CSSでは、スライドの中身のスタイルに絞ってスタイルを調整します。

.splide__slide {
  display: grid;
  place-content: center;
  aspect-ratio: 1/1;
  background-color: #a6de3c;
}

3.JavaScriptで動かす。

自前のJSファイルの中に、スライダーを動かすためのコードを書いていきます。以下が基本の型となります。

new Splide( '.splide' ).mount();

今回は、AutoScrollエクステンションも使用するため、Splideを初期化する際、window.splide.Extensionsを渡します。

new Splide( '.splide' ).mount( window.splide.Extensions );

Splideをカスタムするために、オプションを追加していきましょう。
第2引数の{} の中に、オプションを追加していきます。

オプションの条件は以下に設定します。

共通
- ループあり
- 矢印非表示
- ページネーション非表示
PC
- スライドのwidth200px
- スライド間の余白20px
SP(767px以下)
- スライドのwidth100px
- スライド間の余白10px

※その他にも設定したい方は、オプションを参考にカスタムしてみてください！

オートスクロールのOption

通常のOption

new Splide(".splide", {
  type: "loop", // ループあり
  arrows: false, // 矢印非表示
  pagination: false, // ページネーション非表示
  fixedWidth: "200px", // スライドのwidth200px
  gap: "20px", // スライド間の余白20px

  breakpoints: { // 767px以下のスタイル
    767: {
      fixedWidth: "100px", // スライドのwidth100px
      gap: "10px", // スライド間の余白10px
    },
  },
}).mount( window.splide.Extensions );