WEB制作

『Splide』でWebサイトにスライダー導入！

  /

こんにちは、みなさん！今回は、WEBサイトのデザインをワンランクアップさせるスライダーライブラリ「Splide」についてご紹介します。スライダーといえば、「Slick」や「Swiper」も有名ですが、「Splide」はそのシンプルさと使いやすさで、今じわじわと注目を集めているんです。さっそく導入方法を見ていきましょう！

Splideの特徴と他のライブラリとの違い

まずは、「Splide」が他のスライダーライブラリとどう違うのか、簡単に説明しますね。

  • Slickとの違い: 「Slick」は長年愛されてきたライブラリで、シンプルで柔軟性が高いのが特徴。でも、メンテナンスが少し滞り気味…。一方、「Splide」は軽量で最新の機能が満載。パフォーマンスも高く、よりモダンなスライダーを求める方にピッタリです。
  • Swiperとの違い: 「Swiper」は特にタッチ操作やモバイルでの体験に強いスライダーライブラリです。一方で、「Splide」は設定が簡単で軽量、しかもデフォルトでアクセシビリティに配慮されているのがポイント。つまり、初学者や簡単にスライダーを実装したい方にとって、とても扱いやすいんです。

「Splide」は、軽量でモダン、さらにメンテナンスもきちんとされているので、「とにかくお手軽にスライダーを実装したい！」という方にはもってこい。では、導入の手順を見ていきましょう！

Step 1: Splideの準備

まずは、公式サイト（Splide）から必要なファイルをゲットしましょう。もしくは、CDNを使ってもOKです。お好みでどうぞ！CDNを使う場合は、以下のコードをHTMLの<head>セクションに追加してください

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

Step 2: HTMLを準備

次に、スライダーを設置したい部分にHTMLを追加します。ここでは基本的なスライダーの例を紹介します。まず、HTMLに以下のようなコードを追加します

<div class="splide" role="group" aria-label="Splideの基本的なHTML">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 1</li>
      <li class="splide__slide">Slide 2</li>
      <li class="splide__slide">Slide 3</li>
    </ul>
  </div>
</div>

 

この部分がスライダーになるんです！簡単でしょ？

Step 3: JavaScriptでスライダーを初期化

最後に、JavaScriptでスライダーを初期化します。HTMLの<body>の最後に以下のスクリプトを追加します

<script>
  document.addEventListener('DOMContentLoaded', function () {
    new Splide('.splide').mount();
  });
</script>

これで準備は完了！document.addEventListenerを使って、ページが読み込まれたらスライダーが初期化されるようにしています。お手軽ですよね！

まとめ

はい、これでSplideの導入は完了です！簡単な手順で、サイトにおしゃれなスライダーを追加できちゃいます。カスタマイズも簡単にできるので、ぜひいろいろ試してみてくださいね！Happy Coding!

RELATED POST