JavaScript

Splide.jsで実現するスマートなスライダー：初心者から上級者まで使える完全ガイド

  /

今回はWebデザインの世界で話題のSplide.jsについて、その魅力と使い方をわかりやすく解説します。Splide.jsは、スワイプやタップに対応したスライダーを簡単に実装できる、使い勝手の良いJavaScriptライブラリです。これからご紹介する手順に沿って、あなたのウェブサイトも一層魅力的なものに変身させましょう。

Contents

Splide.jsの基本となるCSSの設定

まず最初に、Splide.jsを使うための土台となるCSSの設定から始めましょう。以下のコードをウェブサイトの適切な場所に追加してください。

  • splide.min.cssファイルの読み込み：このスタイルシートがSplide.jsの見た目を整えます。
  • カスタムスタイルの追加：ウェブサイトのデザインに合わせて、基本のスタイルを調整します。
      • <link rel="stylesheet" href="css/splide.min.css">
<style>
body {
  font-size: 14px;
  text-align: center;
  line-height: 2em;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 2em;
  padding: 15px 0 30px 0;
}
</style>

      HTMLでのスライダー構築

      次に、HTMLを使ってスライダーの構造を作ります。以下のコード例では、スライドエリア（class=”splide”）内にスライダーとして表示したい画像を3枚（1.jpg～3.jpg）用意しています。もちろん、これはあなたのニーズに合わせて自由に変更可能です。

      <h1>Splide.jsを使ってスワイプやタップに対応したスライダーを表示</h1>

<section class="splide" aria-labelledby="carousel-heading">
  <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide"><img src="1.jpg"></li>
            <li class="splide__slide"><img src="2.jpg"></li>
            <li class="splide__slide"><img src="3.jpg"></li>
        </ul>
  </div>
</section>

      JavaScriptでの動作設定

      Splide.jsの魅力は、何といってもその柔軟なカスタマイズ性にあります。以下のJavaScriptコードを追加することで、スライダーが動作するようになります。

      • splide.min.jsファイルの読み込み：これがSplide.jsの核となる機能を提供します。
      • スライダーの初期化と設定：ページが読み込まれた後、Splide.jsを初期化し、必要な設定を行います。ページローディング後の処理「document.addEventListener( ‘DOMContentLoaded ～」内にSplide(‘スライドエリアのタグ要素’)を記述します。
          • <script src="js/splide.min.js"></script>
<script>
  document.addEventListener( 'DOMContentLoaded', function() {
    var splide = new Splide( '.splide' );
    splide.mount();
  } );
</script>

          Splide.jsを使ってスワイプやタップに対応したスライダーを表示するデモページ

          実際にSplide.jsを使ったスライダーがどのように機能するのか、以下のデモページで確認してみてください。リアルタイムでの動作を見ることで、より具体的なイメージが湧くはずです。

          Splide.jsを使ってスワイプやタップに対応したスライダーを表示するデモページ

          ソース元：Splide – アクセシビリティに配慮した軽量・高機能スライダー

          Splide – アクセシビリティに配慮した軽量・高機能スライダー

          まとめ

          ここまでの手順で、基本的なSplide.jsの導入は完了です。しかし、このライブラリの真価は、その応用力にあります。例えば、スライダーの自動再生、無限ループ、異なるサイズの画像対応、サムネイル連動など、多様なカスタマイズが可能です。自分のウェブサイトに合わせたユニークなスライダーを作成し、訪問者の目を引き付けましょう。

          　
          ※流用される場合は自己責任でお願いします。
          　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

          画像スライダー Splide.js
関連記事