Web制作

  1. ブログトップ
  2. Web制作
  3. グリッドレイアウトのスライダーを作る方法

Web制作

グリッドレイアウトのスライダーを作る方法

仲川 舞

複数行・複数列のグリッドレイアウトをスライダーで実現したい場合、通常のスライダーライブラリでは対応が難しいことがあります。そこで、今回はJQuery不要のJavaScriptのライブラリ、Splide.jsを使って、グリッドレイアウトのスライダーを作成する方法を紹介します。

Splide.jsとは？

Splide.jsは、高機能で軽量なJavaScriptスライダーライブラリです。シンプルで直感的なAPIを提供し、画像やコンテンツを美しくスライドさせることができます。Splide.jsは、軽量でパフォーマンスが良く、レスポンシブ対応が簡単です。グリッドレイアウトのスライダーも拡張機能で簡単に実装できるので、おすすめです。

Splide.jsの導入方法

公式サイトのdist/jsディレクトリ下にあるsplide.min.jsファイルをダウンロードして、<script>タグで読み込む、またはCDNでの読み込みで導入が可能です。

CDNの読み込みの場合は、アップデート等での影響を避けるため、特定のバージョン番号を指定することが強く推奨されています。

CDNでの読み込み

今回は、CDNで2024年12月6日現在の最新バージョン4.1.4を読み込みます。

<!-- Splide.js本体 -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

<!-- Splide.jsのスタイルシート -->
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">

グリッド拡張機能の読み込み

グリッドレイアウトを使用するためには、Splide.jsのグリッド拡張も読み込む必要があります。

<!-- グリッド拡張機能の読み込み -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-grid@0.4.1/dist/js/splide-extension-grid.min.js"></script>

これで、Splide.jsとグリッド拡張機能が使えるようになります。

グリッドレイアウトのスライダー作成方法

グリッドスライダーのサンプル

HTML

<ul>内に複数の<li>要素を用意します。それぞれの<li>はスライドアイテムとなり、スライダー内でスクロールします。

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <a href="#">
          <img src="image01.jpg" alt="アイテム1">
        </a>
      </li>
      <li class="splide__slide">
        <a href="#">
          <img src="image02.jpg" alt="アイテム2">
        </a>
      </li>
      <li class="splide__slide">
        <a href="#">
          <img src="image03.jpg" alt="アイテム3">
        </a>
      </li>
      <li class="splide__slide">
        <a href="#">
          <img src="image04.jpg" alt="アイテム4">
        </a>
      </li>
      <li class="splide__slide">
        <a href="#">
          <img src="image05.jpg" alt="アイテム5">
        </a>
      </li>
      <li class="splide__slide">
        <a href="#">
          <img src="image06.jpg" alt="アイテム6">
        </a>
      </li>
      <li class="splide__slide">
        <a href="#">
          <img src="image07.jpg" alt="アイテム7">
        </a>
      </li>
      <li class="splide__slide">
        <a href="#">
          <img src="image08.jpg" alt="アイテム8">
        </a>
      </li>
    </ul>
  </div>
</div>

JavaScript

document.addEventListener('DOMContentLoaded', function () {
  new Splide('.splide', {
    type: 'loop',       // スライドのループ設定
    perPage: 1,         // 1ページに表示するスライド数
    gap: '10px',        // スライド間の隙間
	grid: {
		dimensions: [ [2, 4] ], // 横4列、縦2行
		gap: {.        //行と列のギャップサイズ
			row: '1em',
			col: '1em'
		}
	},
	breakpoints: {
		680: {
			grid: {
				dimensions: [ [ 2, 2 ] ],
			}
		}
	}
  }).mount({ Grid: window.splide.Extensions.Grid });
});

CSS

.splide{
  width: 100%;
}
.splide__slide img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.splide__slide {
  background-color: #ececec;
  padding: 10px;
}

ブレークポイントでのグリッド変更設定

Splide.jsでは、ブレークポイントでスライダーで表示する数を変更することも簡単にできます。

スライダースマホ時の画像
	breakpoints: {
		680: {
			grid: {
				dimensions: [ [ 2, 2 ] ],
			}
		}
	}

終わりに

Splide.jsで、簡単にグリッドレイアウトのスライダーを作成する方法をご紹介しました。レスポンシブにも対応しており、PCとスマホ両方の画面サイズに合わせて表示を調整できるため、非常に便利です。ぜひ使ってみてください。

spoool blog

TOP