2026.08.10
# コーディング・システム開発
【2026年最新版】改めて今から学ぶ！Web制作の定番スライダー「Swiper」基本の使い方と必須設定
こんにちは！
Maromaroフロントエンジニアのgenです。
Web制作の現場でスライダー（カルーセル）を実装する際、第一候補として名前が挙がるのがSwiperです。
長年使われている定番のJavaScriptライブラリですが、バージョンアップが盛んなこともあり、「ネットで見つけたコードをコピペしたのに動かない…」「最新の書き方がいまいち分からない」と悩む新人エンジニアも少なくありません。
そこで今回は、現場に入ったばかりの新人フロントエンドエンジニア向けに、Swiperの基本的な構造・読み込み方・実務でよく使うおすすめオプション・ハマりやすい注意点をまとめて解説します！
1. Swiperの基本構造（HTMLの約束事）
Swiperを正しく動かすために最も重要なのは、HTMLのクラス名と階層構造のルールを守ることです。
Swiperは指定されたクラス名を元にJavaScriptで要素の幅や位置を計算するため、この構造を崩してしまうと正しく動作しません。
<!-- ① 全体を囲むコンテナ（クラス名は変更可能ですが、基本は .swiper） -->
<div class="swiper">
<!-- ② スライド全体を包むラッパー（.swiper-wrapper は必須！） -->
<div class="swiper-wrapper">
<!-- ③ 各スライド（.swiper-slide は必須！） -->
<div class="swiper-slide"><img src="image01.jpg" alt="画像1"></div>
<div class="swiper-slide"><img src="image02.jpg" alt="画像2"></div>
<div class="swiper-slide"><img src="image03.jpg" alt="画像3"></div>
</div>
<!-- 必要な場合のみ設置するUIパーツ（.swiper の中に配置） -->
<div class="swiper-pagination"></div> <!-- ページネーション（ドット） -->
<div class="swiper-button-prev"></div> <!-- 前へボタン -->
<div class="swiper-button-next"></div> <!-- 次へボタン -->
<div class="swiper-scrollbar"></div> <!-- スクロールバー -->
</div>
2. CDNを使ったシンプルな読み込み
実務ではnpm等でバンドルすることもありますが、まずは一番手軽で構造を理解しやすいCDN経由での読み込みから始めましょう。
headタグ内でCSS・JavaScriptを読み込みます。
<head>
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- 自作のJSファイル -->
<script src="main.js defer"></script>
</head>
<body>
<!-- ここにスライダーのHTML -->
</body>
3. JavaScriptでの初期化
読み込みが完了したら、JavaScriptでSwiperを初期化します。最小限のコードは以下の通りです。
// main.js
const swiper = new Swiper('.swiper', {
// ここにオプションを書いていきます
loop: true, // ループ再生
slideActiveClass: "is-active", // アクティブなスライドに付与するクラス
slidePrevClass: "is-prev", // 前のスライドに付与するクラス
slideNextClass: "is-next", // 次のスライドに付与するクラス
// ページネーション（ドット）を有効化
pagination: {
el: '.swiper-pagination',
clickable: true, // ドットクリックでスライド移動可能にする
},
// ナビゲーション（左右の矢印）を有効化
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
これだけで、基本的な動作をするスライダーが完成します。
4. 実務で「絶対使う」おすすめオプション5選
現場の案件で頻出する、覚えておくべき必須オプションを5つピックアップしました。
① slidesPerView （表示枚数の指定）
1画面に何枚のスライドを表示するかを設定します。'auto' に指定すると、CSSで指定したスライドの幅（width）に合わせて自動計算してくれます。
slidesPerView: 1, // 1枚表示（デフォルト）
// slidesPerView: 3, // 3枚並べて表示
// slidesPerView: 1.2, // 次のスライドをチラ見せしたいとき（1.2枚表示）
② spaceBetween （スライド間の余白）
スライド同士の間の余白（ピクセル単位）を設定します。
spaceBetween: 20, // スライド間に20pxの余白
③ autoplay （自動再生）
自動でスライドを流したい場合に指定します。
autoplay: {
delay: 3000, // 3秒ごとにスライド
disableOnInteraction: false, // ユーザーが手動で操作した後も自動再生を継続する
},
④ breakpoints （レスポンシブ対応）
画面幅（ウィンドウサイズ）に応じて表示枚数や余白を切り替えます。
breakpoints: {
// 768px以上（PCサイズ）の場合の設定
768: {
slidesPerView: 3,
spaceBetween: 30,
}
}
⑤ centeredSlides （アクティブスライドを中央配置）
スライドを左寄せではなく中央に配置します。「両端のスライドを半分だけ見せたい」といったデザインでよく使います。
centeredSlides: true,
5. 新人がハマりがちな「あるある注意点」4選
最後に、実務で誰もが一度は遭遇する「動かない・見た目が崩れる」トラブルと対策をまとめました。
注意点1：loop: true なのにスライドの総枚数が少なすぎて表示がバグる
原因: loop: true を指定すると、Swiperは裏側でスライド要素をクローン（複製）して無限ループを実現します。しかし、画面に表示する枚数（slidesPerView）に対して元々のスライド枚数が少なすぎると、クローンを作る素材が足りなくなり、表示が崩れたり空白の枠ができたりします。
対策: 表示枚数の「2倍以上」のスライド枚数を用意するか、枚数が足りない場合はJavaScript側で以下のように loopedSlides を指定して、強制的に複製するクローン枚数を確保します。
const swiper = new Swiper('.swiper', {
loop: true,
slidesPerView: 3,
loopedSlides: 3, // クローンするスライドの数を明示的に指定して不足を防ぐ
});
注意点2：CSSの margin で余白を作ろうとして崩れる
原因: スライド（.swiper-slide）に対してCSSで margin-right などを付与すると、Swiperの位置計算が狂って挙動がおかしくなります。
対策: 余白の調整はCSSではなく、必ずJavaScript側の spaceBetween オプションで行ってください。
注意点3：タブ切り替えやアコーディオンの中に置くと高さ・幅が0になる
原因: display: none; で非表示になっている要素の中でSwiperを初期化すると、要素の幅や高さを正常に取得できず潰れてしまいます。
対策: 初期化オプションに以下を追加すると、表示状態が変化した際に自動でサイズを再計算してくれます。
observer: true,
observeParents: true,
注意点4：ネットの古い記事の書き方（Swiper v6以前）を混ぜてしまう
原因: ネット上の古い記事には Swiper.use([Navigation, Pagination]); のようなモジュール読み込みの旧記述が残っており、現在のバージョン（v11等）で記述するとエラーになります。
対策: 検索する際は検索期間を「1年以内」などに絞るか、公式ドキュメント（Swiper API Documentation）を参照する癖をつけましょう。
まとめ
- HTMLの指定クラス名（.swiper, .swiper-wrapper, .swiper-slide）は絶対に崩さない
- スライド間の余白はCSSのmarginではなく
spaceBetweenを使用する loop: true使用時は表示枚数に対するスライド総数の不足に注意する（loopedSlidesで対応）
Swiperは一見複雑に見えますが、「HTMLの基本構造を守ること」と「よく使う基本オプション」さえ押さえておけば、ほとんどのWebサイトのデザインに対応できるようになります。
特に loop: true を使う際のスライド枚数問題などは実務で一度は遭遇するポイントですので、ぜひ覚えて活用してみてください！
以上、Maromaroのgenでした。
