🗡️
Swiperの基本知識
前書き
Swiperを実装する際に知っておくべき基本知識を整理しました。
これらを理解しておけば、Swiperの実装がスムーズになると思います。
1️⃣ Swiperの基本構造
Swiperを使うには、以下の基本的な構造を知る必要があります：
HTMLの基本構造
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">スライド1</div>
<div class="swiper-slide">スライド2</div>
<div class="swiper-slide">スライド3</div>
</div>
<!-- 必要に応じてナビゲーションやページネーションを追加 -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
CSS（基本スタイル）
Swiperは独自のスタイルを持ちますが、以下を適切に設定することが重要です：
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
2️⃣ Swiperのインストール方法
CDN（簡易セットアップ）
- HTMLに以下を追加：
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
npmを使用したインストール
npm install swiper
その後、JavaScriptでインポート：
import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';
3️⃣ Swiperの初期化
Swiperを動作させるには、JavaScriptで初期化する必要があります：
const swiper = new Swiper('.swiper', {
// オプション
direction: 'horizontal', // 水平スライダー
loop: true, // ループ有効化
autoplay: {
delay: 3000, // 自動再生の間隔
},
pagination: {
el: '.swiper-pagination',
clickable: true, // ページネーションのクリック有効化
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
4️⃣ 主要オプション
基本オプション
| オプション | 説明 | デフォルト値 |
|---|---|---|
| direction | スライダーの方向 (horizontal/vertical) | horizontal |
| loop | スライドのループ有効化 | false |
| autoplay | 自動再生を設定 | オブジェクト |
| speed | スライドの速度（ms） | 300 |
ナビゲーション
| オプション | 説明 |
|---|---|
| pagination.el | ページネーション要素のセレクタ |
| pagination.clickable | ページネーションをクリック可能にするか |
| navigation.nextEl | 「次へ」ボタンのセレクタ |
| navigation.prevEl | 「前へ」ボタンのセレクタ |
レスポンシブ対応
以下のようにブレークポイントごとに設定を変更可能：
breakpoints: {
640: {
slidesPerView: 1, // 表示するスライド数
spaceBetween: 10, // スライド間のスペース
},
768: {
slidesPerView: 2,
spaceBetween: 20,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
},
},
5️⃣ Swiperの拡張機能
- Lazy Loading（遅延読み込み）
const swiper = new Swiper('.swiper', {
lazy: true, // 遅延読み込み有効化
});
- エフェクト
const swiper = new Swiper('.swiper', {
effect: 'fade', // フェードエフェクト
});
| エフェクトタイプ | 説明 |
|---|---|
| fade | フェード |
| cube | キューブ |
| coverflow | カバーフロー |
6️⃣ トラブルシューティング
1. Swiperが動作しない
- CSSやJSが正しく読み込まれているか確認。
- Swiperの初期化が正しいか確認。
2. スタイルが崩れる
- .swiper や .swiper-slide に正しいCSSが適用されているか確認。
3. ページネーションやナビゲーションが機能しない
- HTML構造とセレクタが正しいか確認。
参考
Discussion