はじめまして！さこちゃんです。
今回は「Swiperの使い方」について初心者向けに丁寧に解説していきます！
実務でも重宝しますので、ぜひ参考にしてみてくださいね。
Swiperとはなんぞや？
まずはSwiperが一体何者なのかについてみていきましょう〜〜
Swiperとは・・・？
Webサイトで、スライドショーやカルーセルを超簡単に実装できるJavaScriptのライブラリ。Slickと異なりjQueryが不要でかつ軽量、また豊富なオプションやカスタマイズ性を備えながら使い方はめちゃシンプル。最新のWeb開発でかな〜り重宝されています。
公式サイトはこちら。
これよく見る！なんて動きもSwiperで簡単に実装できちゃいます。
▼公式サイト：https://swiperjs.com/
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をコピーします。
▼公式サイト：https://swiperjs.com/get-started#use-swiper-from-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をコピーします。
▼公式サイト：https://swiperjs.com/get-started#use-swiper-from-cdn
該当のCDNはこちらになります。（2025年6月時点）
下記CDNが最新とは限らないので、コピペしないよう注意してください。
必ず公式サイトの最新コードをとるようにしてください。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />コピーしたCDNをheadタグ内に配置します。
（※コードの配置位置がステップ1と異なるので気をつけてね）
これでCSSの導入は完了です！
ステップ3：HTMLを記述する
次にHTMLを記述していきます。
記述にもポイントがあるので、詳しくみていきましょう〜
Swiperを導入する上で、必要なHTML要素は下記の3つです。
これらはクラス名で必要になります。
＜ 必須HTML要素 ＞
.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>ステップ4：JSを記述する
さあいよいよJSを書いて動かしていきましょーーう！
下記がベースとなるJSです。
シンプルなスライダーなら、これだけで動作します。
下記コードをベースに、オプションを追加で指定していきましょう〜
const swiper = new Swiper('.swiper', {
// オプションを記述
});下記がオプションを追記した完成形です。
これでデモ通りの動きが再現できるようになったはずです。
const swiper = new Swiper('.swiper', { loop: true, // デフォルトはfalse
effect: 'fade', //フェードで切り替え
speed: 1000, //切り替えのスピード
autoplay: { //自動再生
delay: 2000, //切り替えまでの待機時間
disableOnInteraction: false, // 操作しても自動再生を継続させる
}});Swiperには他にも、
画面サイズに応じてスライド数を調整したり、
アニメーション効果をカスタマイズしたり、
ページネーションをつけたり、、、
というように豊富なオプションをつけることが可能です。
こちらのサイトではオプションがまとめられています。
ぜひ参考にしてみてくださいね。
▼参考サイト：https://junpei-sugiyama.com/swiper-option/
うまく動作しない場合
これまでの手順に沿って記述したけど動作しない・・・・なんて場合。
下記をチェックしてみましょう〜
・Swiper専用のJS/CSSを読み込んでいるか？
・JS/CSSのタグの記述位置は間違っていないか？
・3つのHTML要素（クラス名）の記述が漏れていないか？
・JSの記述が漏れていないか？
まとめ
今回は、Swiperの使い方をご紹介いたしました。
実務でも使用頻度高めです。
ぜひ参考にしてみてください！
