カルーセル「Swiper」の使い方
公開日:2026年02月03日
カルーセル機能を実装できる「Swiper」の使い方を紹介します。
公式サイト：https://swiperjs.com/swiper-api
必要ファイルの読み込み
CDNを使って必要なファイルを読み込みます。
CSSファイル
<link rel="stylesheet" href="css/style.css">JSファイル
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer></script>HTMLで文章構造を作成
img要素の画像パスを変更してください。
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/photo01.png" alt="画像1"></div>
<div class="swiper-slide"><img src="img/photo02.png" alt="画像2"></div>
<div class="swiper-slide"><img src="img/photo03.png" alt="画像3"></div>
<div class="swiper-slide"><img src="img/photo04.png" alt="画像4"></div>
<div class="swiper-slide"><img src="img/photo05.png" alt="画像5"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>画像の枚数を増減させるときは以下のコードを追加・削除してください。
<div class="swiper-slide"><img src="img/photo01.png" alt="画像1"></div>実行コードを記述する
Swiper()の第1引数にCSSセレクタを記述します。今回のコードはクラスセレクタ「’.mySwiper’」でカルーセルの場所を指定しています。
第2引数のオブジェクト内に設定を記述します。
const Swiper = new Swiper(
'.mySwiper',
{
loop: true,
speed: 4000,
spaceBetween: 0,
autoplay: {
delay: 4000, // スライドの表示時間
disableOnInteraction: false, // ユーザー操作後も自動再生を継続
},
navigation: {
nextEl: '.swiper-button-next', // 「次へ」ボタンのクラス名
prevEl: '.swiper-button-prev', // 「前へ」ボタンのクラス名
},
pagination: {
el: '.swiper-pagination',
clickable: false, // ドットをクリック可能にする
type: 'progressbar', // デフォルトはドット（省略可）
},
}
);1. Swiper 基本設定一覧
| カテゴリ | プロパティ名 | 説明 | 代表的な値の例 |
| 挙動 | loop | スライドを無限ループさせるか | true (する) / false (しない) |
speed | スライドが切り替わる速度(ms) | 300 / 800 / 1000 | |
direction | スライドの動く方向 | 'horizontal' / 'vertical' | |
effect | 切り替え時のアニメーション | 'slide' / 'fade' / 'flip' / 'cube' | |
| 表示数 | slidesPerView | 一画面に表示する枚数 | 1 / 3.5 (小数も可) / 'auto' |
spaceBetween | スライド間の余白(px) | 10 / 20 | |
centeredSlides | アクティブなスライドを中央にする | true / false | |
| 自動再生 | autoplay | 自動でスライドさせる設定 | { delay: 3000, disableOnInteraction: false } |
| レスポンシブ | breakpoints | 画面幅ごとの設定変更 | { 768: { slidesPerView: 2 } } |
2. コンポーネント別の詳細設定
各パーツ（ページネーションや矢印）の中でよく使われる値です。
■ pagination（ページネーション）
typeプロパティで見た目を大きく変更できます。
'bullets': 点々（デフォルト）'fraction': 「1 / 5」のような分数表記'progressbar': 今回使用したプログレスバー形式
■ autoplay（自動再生）
delay: 次のスライドへ行くまでの待ち時間（ミリ秒）disableOnInteraction: ユーザーが手動で操作した後に自動再生を止めるか（falseにすると操作後も止まりません）
3. スライドエフェクトのバリエーション
effect プロパティを変えるだけで、リッチな演出が可能です。
'fade': フェードイン・アウト'coverflow': 3Dで奥行きのある回転（アルバムのジャケットをめくるような動き）'creative': 自由度の高いカスタムアニメーション
CSSカスタマイズ例
1. カルーセルの高さを指定する
カルーセル全体の高さを決めるには、コンテナ（今回は .swiperBox）に対して height を指定します。あわせて、中の画像が歪まないように object-fit: cover; を設定するのが一般的です。
CSS
/* カルーセル全体の高さ */
.swiperBox {
height: 400px;
}
/* 画像を枠いっぱいに綺麗に収める */
.swiperBox .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover; /* 比率を保ったまま切り抜く */
}2. 矢印（ナビゲーション）の色を変える
左右の矢印の色は、--swiper-navigation-color という変数で指定します。
CSS
.swiperBox {
/* 矢印の色（例：オレンジ） */
--swiper-navigation-color: #ff9800;
}
/* もしサイズも変えたい場合 */
.swiperBox .swiper-button-prev::after,
.swiperBox .swiper-button-next::after {
font-size: 30px;
}3. プログレスバー（ページネーション）の色を変える
プログレスバーは「背景（グレーの部分）」と「進捗（動く部分）」の2箇所を調整できます。
CSS
/* 進捗バーの色（例：緑） */
.swiperBox {
--swiper-pagination-color: #4caf50;
}
/* バー全体の背景色を変えたい場合 */
.swiperBox .swiper-pagination-progressbar {
background-color: rgba(0, 0, 0, 0.1); /* 薄いグレー */
}同じカテゴリーのコンテンツ
