JavaScript PR

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

記事内に商品プロモーションを含む場合があります

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

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アナリティクスタグは流用しないで下さい。