Next.jsでGlide.jsを使ったスライダーを実装する方法

更新日：

2024/11/21

Next.jsにGlide.jsを導入してスライダーを作成する方法を初心者にも分かりやすく解説します。インストールからNext.jsへの組み込み、オプション設定、スタイリングまで、実装に必要な手順を一通り網羅。サンプルコードを交えて丁寧に説明するので、Next.jsでモダンなスライダーを簡単に実現できるようになります。

1 Glide.jsとは何か？その特徴と利点
- 1.1 依存関係のない純粋なJavaScriptで書かれている
- 1.2 モジュール構造でカスタマイズ性に優れる
2 Next.jsプロジェクトへのGlide.jsのインストール方法
- 2.1 プロジェクトでGlide.jsを使うためのimport文
3 Glide.jsスライダーのマークアップ
4 Next.jsコンポーネントでのGlide.jsの初期化
- 4.1 useEffectフックを使った初期化
- 4.2 型定義ファイルを使ったTypeScriptとの連携
5 Glide.jsスライダーのカスタマイズ方法
- 5.1 オプション設定で動作を変更する
- 5.2 CSSでスタイルを調整する
6 まとめ
- 6.1 slick（スリック）の使い方とオプション設定の完全ガイド！基本から応用まで丁寧に解説
- 6.2 Swiperの使い方を初心者向けに徹底解説！基本からカスタマイズまで

Glide.jsとは何か？その特徴と利点

Glide.jsは、シンプルで使いやすいJavaScriptのスライダー・カルーセルライブラリです。無料で利用でき、軽量で高速、柔軟にカスタマイズできるのが大きな特徴です。jQueryなどの他ライブラリに依存せず、ピュアなJavaScript（ES6）で書かれています。そのためNext.jsと非常に相性が良く、React製のアプリケーションに簡単に組み込むことができます。

依存関係のない純粋なJavaScriptで書かれている

Glide.jsは他のライブラリに依存していないので、jQueryなどをわざわざ導入する必要がありません。ReactベースのNext.jsプロジェクトにも、そのままスムーズに導入可能です。例えば、Next.jsのプロジェクトにGlide.jsを組み込むには以下のようにインストールするだけです。

bash

npm install @glidejs/glide

tsx

import Glide from '@glidejs/glide';
import { useEffect } from 'react';

// マウント時に初期化
useEffect(() => {
  const glide = new Glide('.glide', {
    type: 'carousel',
    perView: 3,
  });

  glide.mount();
}, []);

このようにNext.jsと非常に親和性が高いので、React製のアプリケーションにスライダー機能を追加したいときに最適なライブラリだと言えます。

モジュール構造でカスタマイズ性に優れる

Glide.jsはモジュール構造になっているので、必要な機能だけをインポートして使うことができます。これによりファイルサイズを必要最小限に抑えられ、パフォーマンス改善やページ表示の高速化に役立ちます。標準で提供されるモジュールは以下の通りです。

Anchors
Autoplay
Breakpoints
Build
Clones
Controls
Gaps
Html
Images
Keyboard
Move
Peek
Resize
Run
Sizes
Swipe
Transition
Translate

例えば、以下のように必要なモジュールだけをインポートします。

tsx

import Glide, { Controls } from '@glidejs/glide/dist/glide.modular.esm';

new Glide('.glide', {
  modules: [Controls]
}).mount();

このように、Glide.jsはモジュール単位で機能を取捨選択できるので、アプリケーションに応じて柔軟にカスタマイズ可能です。パフォーマンスを最適化し、無駄のない構成でスライダーを実装できるのが大きなメリットと言えるでしょう。

Next.jsプロジェクトへのGlide.jsのインストール方法

Next.jsでGlide.jsを使うには、まずnpmまたはyarnでGlide.jsをインストールする必要があります。プロジェクトのルートディレクトリで以下のコマンドを実行します。

bash

# npmの場合
npm install @glidejs/glide

# yarnの場合
yarn add @glidejs/glide

これによりプロジェクトのnode_modulesディレクトリ内にGlide.jsがインストールされ、Next.jsアプリケーション内で使えるようになります。インストール後、Next.jsのページコンポーネントでGlide.jsを使うには以下のようなコードを書きます。

tsx

import { useEffect } from 'react';
import Glide from '@glidejs/glide';
import '@glidejs/glide/dist/css/glide.core.min.css';

export default function Home() {
  useEffect(() => {
    const glide = new Glide('.glide', {
      type: 'carousel',
      perView: 3,
    });

    glide.mount();
  }, []);

  return (
    <div className="glide">
      <div className="glide__track" data-glide-el="track">
        <ul className="glide__slides">
          <li className="glide__slide">スライド1</li>
          <li className="glide__slide">スライド2</li>
          <li className="glide__slide">スライド3</li>
        </ul>
      </div>
      <div className="glide__arrows" data-glide-el="controls">
        <button className="glide__arrow glide__arrow--left" data-glide-dir="<">前へ</button>
        <button className="glide__arrow glide__arrow--right" data-glide-dir=">">次へ</button>
      </div>
      <div className="glide__bullets" data-glide-el="controls[nav]">
        <button className="glide__bullet" data-glide-dir="=0"></button>
        <button className="glide__bullet" data-glide-dir="=1"></button>
        <button className="glide__bullet" data-glide-dir="=2"></button>
      </div>
    </div>
  );
}

プロジェクトでGlide.jsを使うためのimport文

上の例のように、Glide.jsを使うコンポーネントやページでは以下の2つのimportが必要です。

Glide.js本体のインポート

tsx

import Glide from '@glidejs/glide';

Glide.jsのコアCSSのインポート

tsx

import '@glidejs/glide/dist/css/glide.core.min.css';

次にReactのuseEffectフック内でnew Glide()を呼び出してGlide.jsを初期化します。第1引数にスライダーのラッパー要素のセレクタ、第2引数にオプションを指定します。

tsx

useEffect(() => {
  const glide = new Glide('.glide', {
    type: 'carousel',
    perView: 3,
  });

  glide.mount();
}, []);

useEffect内でglide.mount()を呼ぶことで、DOMの描画後にGlide.jsを起動することができます。これらのステップを踏むことで、Next.jsアプリケーションでGlide.jsを使ったスライダーを実装できます。

Glide.jsはシンプルなAPIながらも柔軟な設定が可能で、Next.jsと相性抜群です。基本的な使い方はこの通りで、あとはスライダーのマークアップとスタイリングを整えるだけです。インストールやimportでつまずくことがあれば、公式ドキュメントやサンプルコードを参考にしてみてください。初心者でも使いこなせるよう工夫されたライブラリだと思います。

Glide.jsスライダーのマークアップ

Glide.jsでスライダーを作成するには、一定のルールに沿ってHTMLを構築する必要があります。基本的な構造は以下のようになります。

html

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">スライド1</li>
      <li class="glide__slide">スライド2</li>
      <li class="glide__slide">スライド3</li>
    </ul>
  </div>

  <div class="glide__arrows" data-glide-el="controls">
    <button class="glide__arrow glide__arrow--left" data-glide-dir="<">前へ</button>
    <button class="glide__arrow glide__arrow--right" data-glide-dir=">">次へ</button>
  </div>

  <div class="glide__bullets" data-glide-el="controls[nav]">
    <button class="glide__bullet" data-glide-dir="=0"></button>
    <button class="glide__bullet" data-glide-dir="=1"></button>
    <button class="glide__bullet" data-glide-dir="=2"></button>
  </div>
</div>

スライドを表示するトラック部分の書き方

スライダーのメインとなるスライド表示部分は以下のような構造になります。

html

<div class="glide__track" data-glide-el="track">
  <ul class="glide__slides">
    <li class="glide__slide">スライド1</li>
    <li class="glide__slide">スライド2</li>
    <li class="glide__slide">スライド3</li>
  </ul>
</div>

一番外側のdiv要素にはクラス名glide__trackを指定し、data-glide-el="track"属性を付与します。
その中にul要素を置き、クラス名glide__slidesを指定します。
ulの中にはli要素を並べ、各liにはクラス名glide__slideを指定します。
各li要素の中に実際のスライドのコンテンツ（画像やテキストなど）を含めます。

ナビゲーション用の矢印ボタンの配置

スライダーの前後の移動を制御する矢印ナビゲーションは以下のように実装します。

html

<div class="glide__arrows" data-glide-el="controls">
  <button class="glide__arrow glide__arrow--left" data-glide-dir="<">前へ</button>
  <button class="glide__arrow glide__arrow--right" data-glide-dir=">">次へ</button>
</div>

div要素にクラス名glide__arrowsを指定し、data-glide-el="controls"属性を付与します。
その中に前後移動用のボタンを配置します。
各ボタンにはクラス名glide__arrowを指定し、data-glide-dir属性で移動方向を指定します（<で前へ、>で次へ）。
ボタンのラベルは任意のテキストを記述できます。

ページネーション用のバレットボタンの実装

現在のスライド位置を示すページネーション（バレットボタン）は以下のように実装します。

html

<div class="glide__bullets" data-glide-el="controls[nav]">
  <button class="glide__bullet" data-glide-dir="=0"></button>
  <button class="glide__bullet" data-glide-dir="=1"></button>
  <button class="glide__bullet" data-glide-dir="=2"></button>
</div>

div要素にクラス名glide__bulletsを指定し、data-glide-el="controls[nav]"属性を付与します。
その中にスライドの数だけボタン要素を並べます。
各ボタンにはクラス名glide__bulletを指定し、data-glide-dir属性でスライドのインデックスを指定します（0オリジン）。
ボタン自体のテキスト（ラベル）は不要です。

以上のルールに従ってマークアップすることで、Glide.jsが自動的にスライダーのUIを構築してくれます。コンテンツの内容やスタイリングは自由にカスタマイズできますが、クラス名と属性は正しく設定することが重要です。この部分を間違えるとGlide.jsが正しく動作しないので注意が必要です。

Next.jsコンポーネントでのGlide.jsの初期化

Next.jsでGlide.jsを使用する際は、ReactのコンポーネントにGlide.jsの初期化処理を組み込む必要があります。具体的には以下のようなコードを書くことになります。

tsx

import { useEffect } from 'react';
import Glide from '@glidejs/glide';

export default function Slider() {
  useEffect(() => {
    const glide = new Glide('.glide', {
      type: 'carousel',
      perView: 3,
      autoplay: 2000,
    });

    glide.mount();

    // コンポーネントのアンマウント時にGlide.jsをdestroy
    return () => {
      glide.destroy();
    };
  }, []);

  return (
    <div className="glide">
      {/* スライダーのマークアップ */}
    </div>
  );
}

useEffectフックを使った初期化

Glide.jsの初期化は、コンポーネントがマウントされたタイミングで行う必要があります。Next.jsではReactのuseEffectフックを使うのが一般的です。

tsx


useEffect(() => {
  const glide = new Glide('.glide', {
    type: 'carousel',
    perView: 3,
    autoplay: 2000,
  });

  glide.mount();

  return () => {
    glide.destroy();
  };
}, []);

useEffectの第1引数には、副作用を実行する関数を渡します。ここでGlide.jsの初期化を行います。
new Glide()の第1引数にスライダーのセレクタ、第2引数にオプションを指定します。
glide.mount()でスライダーを起動します。
useEffectのクリーンアップ関数としてglide.destroy()を呼び出し、コンポーネントのアンマウント時にGlide.jsを破棄します。
第2引数の依存配列[]を空にすることで、コンポーネントのマウント時に1度だけ副作用が実行されるようにします。

型定義ファイルを使ったTypeScriptとの連携

Next.jsでTypeScriptを使う場合、Glide.jsの型定義ファイルを用意することで型チェックを行えます。まず、@types/glidejs__glideをインストールします。

bash

npm install --save-dev @types/glidejs__glide

あとはコンポーネントでGlideをインポートするだけで、TypeScriptの型チェックが効くようになります。

tsx

import Glide from '@glidejs/glide';

export default function Slider() {
  useEffect(() => {
    const glide: Glide = new Glide('.glide', {
      type: 'carousel',
      perView: 3,
    });

    glide.mount();
  }, []);

  return (
    <div className="glide">
      {/* スライダーのマークアップ */}
    </div>
  );
}

new Glide()の戻り値にGlide型を明示することで、VSCodeなどのエディタ上で型情報を参照できるようになります。TypeScriptを使わない場合は型定義は不要ですが、型による安全性を確保したい場合は@typesのインストールを忘れずに行いましょう。

Glide.jsはシンプルながらも強力で、Next.jsと相性抜群のスライダーライブラリです。ここで紹介した初期化の方法をマスターすれば、あとは応用するだけです。カスタマイズの幅が広いので、デザインを凝ったオリジナリティのあるスライダーを実装できるのも魅力ですね。アイデア次第でどんどん活用していきましょう。

Glide.jsスライダーのカスタマイズ方法

Glide.jsは柔軟なカスタマイズ性を持っており、さまざまなオプション設定やCSSによるスタイル調整が可能です。ここでは代表的なカスタマイズ方法をいくつか紹介します。

オプション設定で動作を変更する

Glide.jsの動作は、初期化時のオプション指定によって細かく制御できます。例えば以下のようなオプションを設定可能です。

tsx

const glide = new Glide('.glide', {
  type: 'carousel',  // スライダーのタイプ（'slider' or 'carousel'）
  startAt: 0,  // 初期表示するスライドのインデックス
  perView: 3,  // 一度に表示するスライド数
  autoplay: 2000,  // 自動再生の間隔（ミリ秒）
  hoverpause: true,  // マウスホバーで自動再生を一時停止
  gap: 20,  // スライド間の余白（px）
  animationDuration: 800,  // アニメーション時間（ミリ秒）
  rewind: true,  // 最初または最後のスライドの動作
  bound: true,  // スライドのラッパー内での動作
  classes: { //　後述の.glide__bullet--activeのスタイルのカスタマイズなどに必要
    direction: {
      ltr: 'glide--ltr',
      rtl: 'glide--rtl',
    },
    type: {
      slider: 'glide--slider',
      carousel: 'glide--carousel',
    },
    swipeable: 'glide--swipeable',
    dragging: 'glide--dragging',
    slide: {
      clone: 'glide__slide--clone',
      active: 'glide__slide--active',
    },
    arrow: {
      disabled: 'glide__arrow--disabled',
    },
    nav: {
      active: 'glide__bullet--active',
    },
  }
});

公式ドキュメントにはこの他にも多数のオプションが網羅されているので、目的に応じて設定を変更してみてください。例えば、自動再生のスライドを3秒ごとに切り替え、マウスホバーで一時停止したい場合は以下のように書けます。

tsx

const glide = new Glide('.glide', {
  type: 'slider',
  perView: 1,
  autoplay: 3000,
  hoverpause: true,
});

CSSでスタイルを調整する

Glide.jsが生成するHTML要素は、クラス名によって細かくスタイリング可能です。スライダーの見た目を思い通りにカスタマイズするには、これらのクラスにCSSを適用します。

html

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">スライド1</li>
      <li class="glide__slide">スライド2</li>
      <li class="glide__slide">スライド3</li>
    </ul>
  </div>
</div>

例えば上記のようなマークアップに対し、以下のようなCSSを適用することでスタイルを変更できます。

css

.glide {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.glide__slide {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.glide__arrow {
  background-color: #333;
  color: white;
  border-radius: 50%;
}

.glide__bullets {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.glide__bullet {
  background-color: #ccc;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 4px;
}

.glide__bullet--active {
  background-color: #333;
}

.glide：スライダー全体のラッパー要素。幅や余白を調整。
.glide__slide：各スライド要素。背景色や余白、影などを設定。
.glide__arrow：ナビゲーションの矢印ボタン。色や形を変更。
.glide__bullets：ページネーションのバレットボタン全体。配置を調整。
.glide__bullet：各バレットボタン。サイズや形、色を指定。
.glide__bullet--active：現在のスライドのバレットボタン。アクティブ時の色を変更。

このようにクラス名を活用することで、Glide.jsのデフォルトスタイルを自由に上書きできます。.glide__bullet--activeのスタイルをカスタマイズする際には、classesで指定する必要があるので忘れずに記述するようにしましょう。

Glide.jsには他にもたくさんのカスタマイズ方法があります。要件やアイデアに合わせて柔軟にスライダーを作り込んでいきましょう。思い通りの動作やデザインを実現できるはずです。

まとめ

この記事では、Glide.jsを使用してNext.jsプロジェクトに美しいスライダー・カルーセルを実装する方法を紹介しました。依存関係のない軽量なライブラリであるため、React製のアプリケーションにもスムーズに組み込むことができます。基本的な導入方法からカスタマイズ方法までを解説しましたので、ぜひ試してみてください。Glide.jsを活用して、ユーザーに魅力的な体験を提供できるスライダーを実装しましょう。

他にもスライダーを表現できるSlickやSwiperの実装方法を紹介している記事もあるのでぜひ同時に参考にしてみてください！