JavaScript

スライドショーを実装できるSplideの基本について解説

2023年10月28日

※ 当サイトではアフィリエイト広告を利用しています

Splideスライド実装方法解説

この記事では「スライドショーを実装できるSplideの基本」について解説します。

Splideは、SwiperやSlickなどと同様に簡単にスライドショーを実装することができます。

この記事を読むと...
  • Splideの基本的な使い方が分かる
  • Splideの特徴が分かる

Splideの特徴

Splideは、スライドショーの実装を簡単に実装できるライブラリです。スライドショーを実装できるもので、同様のものではSwiperやSlickが挙げられます。

Splideの特徴としては、以下のものがあります。

  • jQueryに依存しない。
  • 動作が軽い。
  • 公式が日本語対応。

SlickはjQuery依存ですが、SplideはSwiperと同様にjQieryに依存せずに動作します。また、jQueryを通さずに使用できるので動作は軽いです。

公式が日本語で対応しているので、カスタマイズの際にも調べやすいです。

Splideの基本

Splideの環境構築は2種類あります。

  • CDNを使う
  • ローカルファイルとしてダウンロード

CDNとは「Content Delivery Network(コンテンツデリバリーネットワーク)」の略称で、外部ファイルをリンク1つで使用することができる仕組みのことです。CDNで使う場合は導入が簡単なので、ここではCDNで解説します。

以下のサイトにアクセスすると、CDNファイルをコピーできるのでそれをコピーしてHTMLファイルに貼り付けます。

https://www.jsdelivr.com/package/npm/@splidejs/splide?path=dist

splide-cdn

これらCDNをheadタグ内に記述します。

<head>
~~省略

  <!-- splideのJavaScript CDN -->
  <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

  <!-- splideのCSS CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
  <script src="main.js" defer></script>
  <link rel="stylesheet" href="style.css" />
</head>

Splideの基本構文は以下になります。

基本構文

<section class="splide" aria-labelledby="carousel-heading">
      <h2 id="carousel-heading">splide構造</h2>
      <div class="splide__track">
        <ul class="splide__list">
          <li class="splide__slide">
            <img src="https://drive.google.com/uc?export=view&id=1acK5aIgriJP8K017fY7IBDSPPzZvLCSh" alt="">
          </li>
          <li class="splide__slide">
            <img src="https://drive.google.com/uc?export=view&id=1LdDr5vvHVGZeph6xAQHi08ju5ISCg0yb" alt="">
          </li>
          <li class="splide__slide">
            <img src="https://drive.google.com/uc?export=view&id=1q4dZQHzWokyE_Q7LSg0s55LXucAynZoE" alt="">
          </li>
          <li class="splide__slide">
            <img src="https://drive.google.com/uc?export=view&id=1LdDr5vvHVGZeph6xAQHi08ju5ISCg0yb" alt="">
          </li>
          <li class="splide__slide">
            <img src="https://drive.google.com/uc?export=view&id=1acK5aIgriJP8K017fY7IBDSPPzZvLCSh" alt="">
          </li>
        </ul>
      </div>
</section>
.splide__slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
// splide基本構文
new Splide(".splide").mount();

Splideでは、splide、splide__track、splide__list、splide__slide要素が必須要素となります。JavaScriptでは、以下の記述だけで基本的な動作は完了します。

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

Splideは以下のようなイメージです。

矢印はオプションで非表示にすることもできます。

Splideのオプション

Splideではオプションを設定することができます。Splideでオプションを設定する場合、以下のように記述します。

// splideのオプション設定
new Splide(".splide", {
  オプション名1: 値,
  オプション名2: 値,
}).mount();

オプション名を追記する場合、「,(カンマ)」で区切ります。

例えば、Splideで以下のようなオプションを設定できます。

See the Pen Untitled by 山中滉大 (@tips-web) on CodePen.

new Splide(".splide", {
  autoplay: true, // 自動再生(デフォルトはfalse)
  interval: 2000, // 自動再生の間隔(autoplay有効時のみ)
  speed: 1000, // スライドの移動時間
  rewind: true, // スライドがの最後まで行ったら先頭に戻る(デフォルトはfalse)
  type: "slide", // スライドのエフェクト:スライド
  perPage: 2, // 1ページに何枚スライドを表示するか
  gap:"16px", // スライド間余白
  breakpoints: { // ブレイクポイントの設定
    640: {
      perPage: 1,
    },
  }
}).mount();

設定したオプションは以下のとおりです。

  • autoplay:自動再生
  • interval:自動再生の間隔
  • speed:スライドの移動時間
  • rewind:スライドが最後まで行ったら先頭に戻る
  • type:スライドのエフェクト
  • perPage:1ページにスライドを何枚表示するかの設定
  • gap:スライド間の余白
  • breakpoints:ブレイクポイントの設定

以下の部分でブレイクポイントを640px幅に設定しています。画面幅が640px幅よりも小さくなると、スライドが1ページに1枚だけ表示するようになります。

breakpoints: { // ブレイクポイントの設定
    640: {
      perPage: 1,
    },
  }

 このように、ブレイクポイントごとにオプションを設定してスライドショーを切り替えることができます。

その他、代表的なオプションは以下になります。

主なオプション

オプション名概要
typeスライダーのタイプ。

‘slide’, ’loop’, ‘fade’

speedスライダーの移動時間 ミリ秒単位。
perPage1ページに何枚スライドを表示するか
perMove1回のスライドで何枚スライドがスライドするか
gapスライド間余白
arrows矢印ボタンを表示するかの設定
paginationページネーションを表示するかの設定
easingCSSトランジションのタイミング

linear, ease, cubic-bezier()など

autoplay自動再生
interval自動再生の間隔 ミリ秒単位。
breakpointsブレイクポイントの設定

上記の他にも、公式では多数のオプションが紹介されています。

https://ja.splidejs.com/guides/options/

まとめ

Splideについて解説しました。

スライドショーの実装ではSwiperやSlickが有名ですが、Splideのようなライブラリも頭に入れておきましょう。

  • この記事を書いた人
アバター画像

こうだい

兼業でWeb制作事業|31歳|本業畑違いで知識0から学習開始→1年目で初案件獲得→2年で月の兼業受注金額70万円達成|4年目で100万円達成(今ここ)|兼業でも稼げることを確信|Web制作メンター|制作費無料のホームページ制作事業運営|コーディング・ホームページ制作のご依頼もお待ちしております

-JavaScript
-