スライダー・ライブラリをまとめて比較

ウェブサイトやアプリを作る時に、「写真や文章を横に並べて、スライドさせながら表示したい」と思ったことはありませんか？そんな時に便利なのが「スライダー」や「カルーセル」と呼ばれる機能です。

今回は、このスライダー機能を簡単に実装できる4つのライブラリを紹介します。それぞれの特徴や機能を比較しながら、あなたのアプリにぴったりなスライダーライブラリを選択してください。

紹介するライブラリ

今回紹介するのは以下の4つのライブラリです。

• Swiper
• Glide.js
• Tiny Slider 2
• Splide

これらはすべて無料で使えるライブラリです（MITライセンス）。ただし、Splideには一部の機能が有料（スポンサー限定）の「Splide Premium」というバージョンもあります。

では、それぞれのライブラリについて詳しく見ていきましょう。

1. Swiper

Swiperは、特にスマートフォンアプリでの使用を想定して作られたライブラリです。ただし、パソコンでも問題なく使えます。

• スマートフォンでの使用に最適化されている
• 多くの機能がある
• 有名なアプリ開発フレームワーク（Framework7やIonic Framework）でも採用されている

2. Glide.js

Glide.jsは、最新のJavaScript（ES6）で開発されています。他のライブラリに依存せず、単独で動作するのが特徴です。

• 他のライブラリを必要としない
• 必要な機能だけを選んで使える（モジュール式）
• プログラマーがカスタマイズしやすい

3. Tiny Slider 2

Tiny Slider 2は、以前人気だった「Owl Carousel」というライブラリを参考に作られました。Owl Carouselは古い技術（jQuery）を使っていましたが、Tiny Slider 2は最新のJavaScript（Vanilla JavaScript）で作られています。

• シンプルで使いやすい
• 軽量（ファイルサイズが小さい）
• 基本的な機能に絞っている

4. Splide

Splideは、最新のTypeScriptという言語で開発された新しいライブラリです。他のライブラリに依存せず、単独で動作します。

• 最新の技術で開発されている
• 拡張機能にも対応している
• 日本語の説明文書がある（公式サイトで提供）

基本機能の比較

それぞれのライブラリの基本機能を比較します。

ここで挙げた機能は、標準でサポートされているかどうかであり、実装ができない訳ではありませんのでご注意ください。

印象としてですが、SwiperとSplideは機能が多い印象です。Glide.jsは機能はリッチではありませんが、APIが充実しているので、コードを書けば十分実現できそうです。Tiny Slider 2はあまり機能は多くありませんが、シンプルなのでカスタマイズは難しくなさそうです。

それぞれの特有の機能について

各ライブラリには、他にはない特別な機能があります。ここでは、それらの特徴的な機能を紹介します。

Swiper

Swiperは機能が多彩で、たとえば以下のような機能が用意されています。また、モバイルアプリでの利用を想定されている点もメリットが大きいです。

• フリーモード
  スライドがグリッドで止まらず、フリーに動かせるモードです。
• パララックス
  背景と前景が異なる速度で動く視覚効果を作れます。
• カードエフェクト
  スライドがカードのように重なるエフェクトです。

Glide.js

Glide.jsの特徴は、各機能がモジュール化されていることです。これにより、必要な機能だけを選んで使うことができ、プログラムから細かく制御できます。

import Glide, { Autoplay } from "@glidejs/glide/dist/glide.modular.esm"
// Autoplayを追加
new Glide(".glide").mount({ Autoplay })

Tiny Slider 2

jQueryプラグインのOwl Carouselに影響されていることもあり、利用はシンプルです。初期化時のオプションでさまざまに指定を行います。

const slider = tns({
    container: ".my-slider",
    items: 3,
    slideBy: "page",
    autoplay: true
});

// スライドを移動
slider.goTo(3);

Splide

アクセシビリティに配慮されています。テーマやローカライズもサポートされており、高機能です。React/Vue/Svelte向けのインテグレーションも用意されています。

何より公式で日本語ドキュメントが用意されている点もメリットが大きいです。

まとめ

スライダーライブラリは、それぞれに特徴があります。どれを選ぶかは、あなたのプロジェクトの要件によって変わってきます。

• 機能をたくさん使いたい → Swiper
• プログラムから細かく制御したい → Glide.js
• シンプルに使いたい → Tiny Slider 2
• 最新の技術を使いたい、日本語の説明が欲しい → Splide

基本的なスライド機能はどのライブラリでも実現できるので、機能が多いからといって必ずしも良いわけではありません。自分のプロジェクトに合ったライブラリを選んでください。

これらのライブラリを使えば、初心者の方でも素敵なスライダーを簡単に作ることができます。ぜひチャレンジしてみてください！