はじめまして！さこちゃんです。
今回は「Swiperの使い方」についてです。
Swiperてって最近よく聞くけど一体どうやって使うんだ〜
使い方はめちゃくちゃ簡単なのだ〜丁寧に解説していくね。
Swiperとはなんぞや？
Swiperとは、Webサイトで、スライドショーやカルーセルを超簡単に実装できるJavaScriptのライブラリのことです。Slickと異なりjQueryが不要でかつ軽量、また豊富なオプションやカスタマイズ性を備えながら使い方はめちゃシンプル。最新のWeb開発でかな〜り重宝されています。
公式サイトはこちら。
これよく見る！なんて動きもSwiperで簡単に実装できちゃいます。
Swiperを導入してみよう！
それでは早速Swiperを導入していきましょう！
今回はこちらを完成形とします。
初心者向けに丁寧に説明していきますね。
ステップ1：Swiper専用のライブラリを読み込む
Swiperを動かすためにSwiper専用のライブラリを読み込みます。
これがないとSwiperが動作しません。
ライブラリとは？
JavaScriptのプログラムを書きやすくするために、使用頻度の高いコードをひとつのファイルにまとめたものです。例えば、jQueryやReact.jsやNode.jsがあります。ライブラリを使用することで、既に使用実績のあるコードを再利用することができ、自分で1からコーディングをする必要がなく作業工数を大幅に削減することができます。
さて、ライブラリの読み込みには下記2通りの方法があります。
（Swiperに限らず多くの場合がそうです。）
方法1：CDNで読み込む
方法2：ファイルをダウンロードしローカルで設置し読み込む
今回は「方法1：CDNで読み込む」でSwiperを導入していきます。
理由はCDNのほうが手軽に導入でき初心者向けだからです。
長期運用や品質担保が必要なサイトに導入する場合は、方法2がおすすめだよ。サイト運用の目的や運用体制に合った方法を選んでみてね。
本題に戻り、まずは公式サイトから最新のCDNをコピーします。
該当のCDNはこちらになります。（2025年6月時点）
下記CDNが最新とは限らないので、コピペしないよう注意してください！
必ず公式サイトから最新コードをとるようにしてください。
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>コピーしたCDNを</body>タグの直前に配置します。
これでライブラリの導入は完了です！
次はCSSを設置します。
ステップ2：Swiper専用のCSSを読み込む
次に、見栄えを調整するためにSwiper専用のCSSを読み込む必要があります。
ライブラリと同様、これがないとSwiperが動作しません。
手順はステップ1とほぼ同じです。
CSSも読み込みに2つの方法があり、CDNで読み込んでいきます。
公式サイトから最新のCDNをコピーします。
該当のCDNはこちらになります。（2025年6月時点）
下記CDNが最新とは限らないので、コピペしないよう注意してください。
必ず公式サイトの最新コードをとるようにしてください。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />コピーしたCDNを<head>タグ内に配置します。
ステップ1と異なり、配置場所が</body>直前ではないので注意しましょう。
これでCSSの導入は完了です！
ステップ3：HTMLを記述する
次にHTMLを記述していきます。
記述にもポイントがあるので、詳しくみていきましょう〜
Swiperを導入する上で、必要なHTML要素は下記の3つです。
これらはクラス名で必要になります。
- swiper：スライダー全体のコンテナ要素
- swiper-wrapper：スライドをラップする要素
- swiper-slide：各スライド要素
HTMLを記述すると、下記のようになります。
上記のクラス名が記述されていないと、Swiperは動作しないので記述忘れにご注意を！
<!-- スライダーのコンテナ -->
<div class="swiper">
<!-- 必要に応じたwrapper -->
<div class="swiper-wrapper">
<!-- スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>Slide 1、Slide 2・・・の中に画像パスを記述すれば完了です。
ステップ4：JSを記述する
さあいよいよJSを書いて動かしていきましょう！
下記がベースとなるJSです。
シンプルなスライダーなら、これだけで動作します。
下記コードをベースに、オプションを追加で指定していきましょう。
まずは下記のコードをコピーし、手元のHTMLにペーストしてください。
const swiper = new Swiper('.swiper', {
// オプションを記述
});先ほどコピーしたコードの中にオプションを書き込みます。
下記がオプションを追記した完成形です。
これでデモ通りの動きが再現できるようになったはずです。
const swiper = new Swiper('.swiper', {
loop: true, // デフォルトはfalse
effect: 'fade', //フェードで切り替え
speed: 1000, //切り替えのスピード
autoplay: { //自動再生
delay: 2000, //切り替えまでの待機時間
disableOnInteraction: false, // 操作しても自動再生を継続させる
}
});他にも、画面サイズに応じてスライド数を調整したり、アニメーション効果をカスタマイズしたり、ページネーションをつけたり、レスポンシブ対応にしたり、というように豊富なオプションをつけることが可能です。
こちらのサイトではオプションがまとめられています。
ぜひ参考にしてみてくださいね。
うまく動作しない場合
これまでの手順に沿って記述したけど動作しない・・・・なんて場合。
下記をチェックしてみましょう〜
まとめ
今回は、Swiperの使い方をご紹介いたしました。
実務でも使用頻度高めです。
ぜひ参考にしてみてください！