カルーセル「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: 'bullets', // デフォルトはドット（省略可）
},
}
);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: 次のスライドへ行くまでの待ち時間（ミリ秒）disableOnInteraction: ユーザーが手動で操作した後に自動再生を止めるか（falseにすると操作後も止まりません）- reverseDirection: 逆方向（右から左）に流す
- stopOnLastSlide: 最後のスライドに達したら再生を止める（loop: falseの場合）
autoplay: {
delay: 2000,
disableOnInteraction: false,
reverseDirection: true,
stopOnLastSlide: true,
},pagination（ページネーション）
typeプロパティで見た目を大きく変更できます。
'bullets': ドット型（デフォルト）'fraction': 「1 / 5」のような分数表記'progressbar': 今回使用したプログレスバー形式
ドット型
pagination: {
el: '.swiper-pagination',
type: 'bullets', // 丸い点
clickable: true, // クリックでスライド移動可能にする
dynamicBullets: true, // スライドが多い時にドットの大きさを動的に変える
},分数表記
pagination: {
el: '.swiper-pagination',
type: 'fraction', // 数字（分数）
// カスタム例: 「1 of 5」のように表示を変えることも可能
renderFraction: function (currentClass, totalClass) {
return '<span class="' + currentClass + '"></span>' +
' of ' +
'<span class="' + totalClass + '"></span>';
}
},プログレスバー型
pagination: {
el: '.swiper-pagination',
type: 'progressbar', // プログレスバー
},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); /* 薄いグレー */
}同じカテゴリーのコンテンツ
