【Swiperの基本】シンプルで美しいスライダーを作成する方法！

2024年12月25日
2025年1月6日
JavaScript
library, Swiper

JavaScript

Webサイトでスライダーを使用すると、コンテンツを魅力的に見せることができます。

しかし、スライダーを自分で一から実装するのは難しく、手間がかかます。

そんな時に役立つのが「Swiper」というライブラリです。

Swiperは、軽量で高機能なスライダーを簡単に作成できるツールです。

さらに、カスタマイズ性も高いため、案件にとらわれず使うことができるのも魅力です！

この記事では、Swiperを使って基本的なスライダーを作成する方法を解説します。

初めてSwiperを使う方でも、簡単にスライダーを導入できるように説明していきますので、ぜひ参考にしてください。

Swiperとは何か
Swiperを導入する手順
基本的なHTML構造とCSSの設定方法
Swiperの初期化コードの書き方
よく使うオプションの解説（ループ、オートプレイ、スライド表示数など）
実際のコード例を用いた具体的な実装方法

Swiperとは

Swiperは、軽量で高機能なスライダーを作成できるJavaScriptライブラリです。

直感的な操作性と美しいアニメーションが簡単に実装できるのが特徴で、モバイルフレンドリーなデザインを導入することができます！

使い勝手、カスタマイズ性もあり、実装の実績もそれなりのものがあります。

以下、実装されている有名なサイトです。

Swiperの基本的な使い方を解説。

ここからは、swiperの使い方・実装方法を解説していきます。

手順に沿って進めていただければ、簡単に実装できます。

Swiperの導入方法。

まず、CDNを使ってSwiperを追加します。

以下のコードをHTMLファイルに挿入してください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

CDN以外にも、ダウンロードしたjsとcssを読み込ませることでも、実装は可能です。

公式サイトにアクセスします。 Swiper公式サイト
ダウンロードリンクをクリックして、ページ内の「Download assets」リンクをクリックすると、必要なファイルが含まれたZIPファイルがダウンロードされます。
ファイルを解凍して、左記のファイルを読み込ませます。（swiper-bundle.min.css /swiper-bundle.min.js）

これで、読み込みは終了です。

HTML構造

続いて、基本的なHTML構造です。

基本は、以下のHTML構造を構築することで機能します。

上記のHTMLの中で、以下にスライドさせたいコンテンツを記述していきます。

<div class="swiper-slide">ここにコンテンツが入ります。</div>

これで、基本のHTMLも完了です。

JavaScriptで初期化

最後は、swiperを初期化さて事前準備は完了です。

swiperが動作するようになります。

const swiper = new Swiper('.swiper', {});

ここまで実装すると、以下のようになります。

要素をクリックしながら、左にスライドしてみてください。

See the Pen 【swiper】基本構文。 by 1buk1 (@1buk1) on CodePen.

基本機能を拡張しよう！

基本的なswiperが実装できたら、次は基本機能を追加していきましょう。

追加できる項目は、以下の２点です。

ナビゲーション
ページネーション

それぞれ、デモを踏まえながら解説していきます。

ナビゲーションの追加

まずは、完成形からご確認ください！

See the Pen 【swiper】基本構文。ナビゲーションの追加。 by 1buk1 (@1buk1) on CodePen.

画面の中に青い矢印があると思います。

そこをクリックすると、左右にスライドが移動します。

先ほどは、クリックした状態で左右にずらして、スライドを変更していましたが、ナビゲーションを実装することで、クリックひとつでスライドを切り替えることができます。

HTMLは以下のものを追加しました。

<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

cssは変わりません。

jsは、ナビゲーションとなる要素を指定してあげます。

navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },

これで、クリックしたらスライドが左右に切り替わる機能を実装できました。

ページネーションの追加

次は、ページネーションの追加をしてみましょう！

こちらも、基本構造としてswiperに組み込まれています。

See the Pen 【swiper】基本構文。ページネーションの追加。 by 1buk1 (@1buk1) on CodePen.

要素の下に●が合わられていると思います。

これが、ページネーションです。

それぞれ、スライドと連動しており、今何番目のスライドが表示されているのかわかるようになっています。

HTMLには、以下の要素を追加しました。

<div class="swiper-pagination"></div>

cssは変更ありません。

jsは、ページネーションとなる要素をしていしてあげます。

pagination: { el: '.swiper-pagination', clickable: true, },

「clickable: true,」を追加することで、ページネーションをクリックすると、クリックしたスライドへ移動させることができます！

不要な場合は、削除すればOKです！

clickable: true,

以上、基本的な機能の追加でした。

ナビゲーションとページネーションのデモ

最後にナビゲーション、ページネーションの両方を実装したデモを置いておきます。

両方必要になったときに、コピーしてつかってください。

jsのオプションを追加するときは、「,」で区切ることを忘れずに！

忘れると、動かなくなります。

See the Pen 【swiper】基本構文。ナビゲーション/ページネーションの追加。 by 1buk1 (@1buk1) on CodePen.

使用頻度の高いSwiperのオプションを紹介！

実務でも使用頻度の高かった機能を紹介していきます。

jsにオプションとして追加するだけなので、実装は難しくありません。

ループ設定。

基本設定のswiperは、最後までスライドさせた後戻りたい場合、ひとつずつ前のスライドに戻る必要がありました。

ループのオプションを実装すると、最後までスライドさせたあと、もう一度次に進めると最初のスライドに戻るようになります。

また、最初のスライドにいるとき、左にスライドさせると、最後のスライドまでいけます。

See the Pen 【swiper】ループオプション追加。 by 1buk1 (@1buk1) on CodePen.

オートプレイ設定。

次は、オートプレイ設定です。

今までは、ナビゲーションなどをクリックすることでスライドを進めていましたが、オートプレイを設定することで、時間経過とともにスライドが移動してきます。

See the Pen 【swiper】オートプレイオプションの追加。 by 1buk1 (@1buk1) on CodePen.

スライド表示数を変更。

スライドは、初期設定では１枚のみしか表示されません。

それを複数枚表示させるオプションです。

See the Pen 【swiper】スライドを複数枚表示させるオプション。 by 1buk1 (@1buk1) on CodePen.

スライドの間の余白が不要な場合は、以下のオプションを削除してください。

spaceBetween: 10, // スライド間の余白（ピクセル）

また、一度に表示させるスライドは、CSSでも調整が可能です。

CSSで調整する場合は、以下の要素の幅を調整してあげてください。

.swiper-slide { この要素の幅を調整してください。 }

ブレイクポイントによって表示枚数を切り替える。

swiperはブレイクポイントを設定して、応じて表示方法を切り替えることができます。

以下は、ブレイクポイントによって表示枚数を切り替えています。

const swiper = new Swiper('.swiper', {
  breakpoints: {
    640: { slidesPerView: 1, spaceBetween: 10 }, // 幅640px以下
    768: { slidesPerView: 2, spaceBetween: 20 }, // 幅768px以下
    1024: { slidesPerView: 3, spaceBetween: 30 }, // 幅1024px以下
  },
});

スライドのエフェクトを変更してスライダーの印象を変える。

最後はエフェクトを変えて、スライドの印象を変えてみましょう！

エフェクトは４種類紹介します！

fade
cube
coverflow
flip

まとめ

Swiperのオプション設定を活用すれば、スライダーをより魅力的で使いやすくカスタマイズできます。

まずは基本的なオプションから試し、自分のWebサイトに最適な設定を見つけてみてください。