今回は、Swiperの基本的な使い方、オプション設定およびカスタマイズの方法を紹介します。
Swiperとは？
SIMまずは初期状態のSwiperの動作を確認してみましょう。
下のCodePenには初期設定のSwiperを載せてありますので、アニメーション動作やコードをご確認下さい。（スマホなどの小さい画面の場合はResultボタンをタップすると実際の表示が見れますよ）。
See the Pen Swiper | initial state by s sim (@s-sim) on CodePen.
ということで、使用頻度の高いSwiperの使い方を紹介していきます。
Swiperの基本設定
SIMまずは、SwiperをWebサイトで動かすための基本設定から紹介します。
- Swiper公式指定の専用CSS（CDN）の読み込み（headタグ内に書く）
- Swiper公式指定の専用JavaScript（CDN）の読み込み（body閉じタグの直上に書く）
- SwiperのJavaScriptへのリンク（body閉じタグの直上に書く）
- Swiperのhtmlのコード（基本、公式ページからのコピペ：画像は各自で用意）
- SwiperのJavaScriptのコード（基本、公式ページからのコピペ）
一つづつ詳しく説明していきます。
Swiper指定のCSS読み込み
SIMまず、Swiperを動かすためには公式サイトにある専用CSSをhtmlのheadタグに書く必要があります。
Swiper用のCSSを読み込むコード（CDN）は下のとおりで、ご自分のhtmlファイルのheadタグにコピペすればOKです。
<!-- swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">ちなみにSwiper公式サイトの専用CSS（Use Swiper from CDN）のリンクはこちらです。
SwiperのCDNに記載されるSwiperバージョンですが、バージョン９に固定しました。この記事も最初はCDNのバージョンを明記せずに常に最新バージョンが適用されるようにしていましたが、2023/9/23時点でオートプレイが２枚目で止まってしまうバグを確認したため、正常に動作するバージョン９に変更いたしました。
具体的にどの部分が変わっているかというと、上記CDN中の「swiper@9」が修正以前は「swper」でした。
Swiper指定のJavaScript読み込み
SIMJavaScriptも同じく、Swiper公式が容易した専用のものをhtmlのbody閉じタグ直上に書き込む必要があります。
Swiper用のJavaScriptを読み込むコード（CDN）は下のとおりで、ご自分のhtmlファイルのbody閉じタグ直上にコピペすればOKです。
<!-- Swiper用のJS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- 自分のサイト用のJS -->
<script src="./js/script.js"></script>ちなみにSwiper公式サイトの専用JavaScript（Use Swiper from CDN）のリンクはこちらです。
SIM補足ですが、このときに自分のサイト用のJavaScriptファイルへのパスも、その下に書かないとスライドが動かないのでご注意下さい。
注意）自分のJavaScriptファイルの格納ディレクトリは人によって違うと思うので、パスは適宜変更して下さい。
Swiper HTMLの基本構造
SIMSwiperのhtmlの基本構造は下のとおりで、公式サイトでは幾つかデモと一緒に紹介されています。
この基本構造は大きく変えるとSwiperが正常に動かなくなるので注意が必要です。私は極力構造を変えないようにして利用しています。
<!-- Swiper -->
<div class="swiper mySwiper">
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>公式サイトのコードはこちらです。
補足すると、上のコードの<div class=”swiper-slide”>Slide 1</div>の内側のSlide 1〜Slide 9がスライドの画像になります。
SIMつまり、Slide 1〜Slide 9の部分を自分が使いたい画像と差し替えればOKです。
Swiper専用JavaScriptとオプション設定
SIM基本設定の最後に、さっきとは別にSwiper用のJavascriptを、自分のサイト用のJavaScriptファイルに書く必要があるのでご注意下さい。
こちらもSwiper公式サイトにデモのコードと一緒に紹介されている（例）ので、そこからコピペしてくるのがオススメです。
下のコードはその一例ですが、コードの横に日本語で機能をコメントアウトしていますので、カスタマイズの際には参考にしてください。
// スライド
var swiper = new Swiper(".mySwiper", {
slidesPerView: 1, //一度に表示するスライド枚数
spaceBetween: 0, //スライド間の余白
loop: true, //ループさせるか？
speed: 1000, //スライド速度
autoplay:{
delay: 3000, //スライド保持時間
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});横スライドループのSwiper
SIMまずはSwiperデフォルトの横にスライドするタイプからご紹介します。
コードの基本骨格は公式サイトからコピペです。
下のCodePenでスライドの動きやコードをご確認下さい。（スマホなどの小さい画面の場合はResultボタンをタップすると実際の表示が見れますよ）。
See the Pen Swiper | initial state by Satoru Shimizu (@sat-simizu) on CodePen.
フェード型ループのSwiper
SIM次もよく使われているフェード（fade）タイプのSwiperのご紹介です。
下にCodePenを貼っておきますので、アニメーション動作やコードをご確認下さい。（スマホなどの小さい画面の場合はResultボタンをタップすると実際の表示が見れます）。
See the Pen Swiper | fade by Satoru Shimizu (@sat-simizu) on CodePen.
SIM先程のスライドタイプのSwiperとの違いについては下記のとおりです。
コードはJavaScriptがたった１行違うだけ（７行目）です。JavaScriptファイル全体は下記のとおりです。
// トップページのスライド
var swiper = new Swiper(".mySwiper", {
slidesPerView: 1, //一度に表示するスライド枚数
spaceBetween: 0, //スライド間の余白
loop: true, //ループさせるか？
speed: 1000, //スライド速度
effect: "fade", //スライドをフェードで切り替える
autoplay:{
delay: 3000, //スライド保持時間
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});つまり、上から７行目の１文を付け加えただけです。
具体的には下の一文「effect: “fade”,」をスライドタイプSwiperのJavaScriptファイルにコピペすればOKです。
effect: "fade", //スライドをフェードで切り替える矢印（Swiperボタン）のカスタマイズ
SIM次はSwiper矢印のカスタマイズの方法です。
矢印（Swiper ボタン）を消す
SIMまずはSwiper矢印ボタンを消します。
方法はシンプルで、htmlから左右のSwiper矢印のタグを消すだけです。
具体的には下のコードhtmlから削除して下さい。
<!-- swiperの左右のボタン -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>その結果、下のように左右の矢印が無いSwiperが作ることができます。
（スマホなどの小さい画面の場合はResultボタンをタップすると実際の表示が見れますよ）。
See the Pen Swiper | fade no button by s sim (@s-sim) on CodePen.
矢印（Swiper ボタン）の形を変える
SIM次は、Swiper矢印のデザインを変える方法です。
矢印のデザインを変える方法は幾つかありますが、お好みの画像を読み込むのが一番手っ取り早いです。
下のCodePenに貼ったSwiperは、矢印画像を読み込んで変更した事例です（スマホなどの小さい画面の場合はResultボタンをタップすると実際の表示が見れますよ）。
See the Pen Swiper | fade circle arrow by s sim (@s-sim) on CodePen.
SIMでは、どうやって矢印画像を読み込ませるか解説していきます。
方法はCSSにコードを付け足すだけでOKです。
追加するコードも基本コピペで、画像のパスだけを変えるイメージです。
実際のSwiper矢印変更のためのCSSコードは下のとおりですので、コピペで活用して下さい。
/* --------------------------------- */
/* ここから矢印のデザインを変更するCSS */
/* --------------------------------- */
/* 矢印画像の高さと幅 */
.swiper-button-prev,
.swiper-button-next {
height: 50px;
width: 50px;
}
/* 矢印を消して画像に変更する */
.swiper-button-prev::after,
.swiper-button-next::after {
content: "";
background-repeat: no-repeat;
background-size: contain;
height: 50px;
width: 50px;
margin: auto;
}
/* 前に戻る矢印の画像パス */
.swiper-button-prev::after {
background-image: url(https://shimizu-create.com/wp-content/uploads/2024/03/arrow-left.png);
}
/* 次に進む矢印の画像パス */
.swiper-button-next::after {
background-image: url(https://shimizu-create.com/wp-content/uploads/2024/03/arrow-right.png);
}矢印（Swiper ボタン）を位置を変える・外に出す
SIMSwiper矢印をスライドの外側に出す方法は、ネットで一般的に紹介されている方法では、新しいバージョンのSwiperで上手く位置調整できない場合が多いです。
ここでは新しいバージョンのSwiperでも使える方法を２つ紹介します。
少し変則的な方法ですが、レスポンシブを考えなければ、CSSにコードを3行足すだけで実装できますよ。
矢印（Swiper ボタン）を外に出す方法１
SIMこの方法は、スライド画像の左右外側に矢印が入るサイズのmarginを設けるシンプルな方法です。
下記CodePenに完成物を載せておきますで、表示とコードをご確認下さい（スマホなどの小さい画面の場合はResultボタンをタップすると実際の表示が見れます）。
See the Pen Swiper | fade circle arrow outside 1 by s sim (@s-sim) on CodePen.
SIM変更点はCSSだけです。直接関係しているコードは下のとおりで、レスポンシブ対応のコードを除けば、たったの３行です。
/* --------------------------------- */
/* 矢印をスライド画像の外に出すためのCSS */
/* --------------------------------- */
.slide-img_wrapper{
margin: 0 80px;
}
@media screen and (max-width: 500px) {
.slide-img_wrapper{
margin: 0 40px;
}
}補足すると、矢印のサイズもレスポンシブで変えているので、そちらのCSSも追記しておきます。
@media screen and (max-width: 500px) {
/* 矢印画像の高さと幅 */
.swiper-button-prev,
.swiper-button-next {
height: 25px;
width: 25px;
}
/* デフォルト矢印を消して画像に変更する */
.swiper-button-prev:after,
.swiper-button-next:after {
height: 25px;
width: 25px;
}
}矢印（Swiper ボタン）を外に出す方法２
SIMもう一つ、Swiper矢印を外側にだす方法を紹介します。
矢印をスライド画像の外側に出すのに必要な左右の余白をmarginのかわりにpaddingで作る方法です。
コードも先程の例のmarginをpaddingで置き換えるだけです。
CodePenは下のとおりで、表示は先程とまったく同じです（スマホなどの小さい画面の場合はResultボタンをタップすると実際の表示が見れますよ）。
See the Pen Swiper | fade circle arrow outside 2 by s sim (@s-sim) on CodePen.
SIMCSSで先程と違う箇所だけ下に抜粋しておきます。
/* --------------------------------- */
/* 矢印をスライド画像の外に出すためのCSS */
/* --------------------------------- */
.slide-img_wrapper{
padding: 0 80px;
}
@media screen and (max-width: 500px) {
.slide-img_wrapper{
padding: 0 40px;
}
}ネット上で一般的に紹介されている方法はhtmlのSwiper矢印ボタンを一つ上の階層に移す方法ですが、位置調整が結構面倒で新しいバージョンのSwiperで使っている事例は発見できていません。
そのまま真似すると表示が思い通りにならなかったので、今回は別の方法を紹介しました。
ページネーション ( swiper-pagination ) のカスタマイズ
SIMつぎにSwiperのページネーション（pagination）のカスタマイズを紹介します。
ページネーションというのは、Swiperのスライド画像の下部に並んでいる丸で、スライドの動きと連動して動きます。
ページネーション ( pagination ) を消す
SIMまずはページネーションを消す方法からご紹介します。
方法は、Swiperのhtmlから以下のページネーション（pagination）のコードを消すだけです。
<!-- swiperの画面下部のページネーションのポチポチ -->
<div class="swiper-pagination"></div>ページネーションを消した状態を下のCodePenです。
（スマホなどの小さい画面の場合はResultボタンをタップすると実際の表示が見れますよ）
See the Pen Swiper | fade circle arrow | no pagination by s sim (@s-sim) on CodePen.
ページネーション ( pagination ) の色と大きさを変える
SIM続いて、ページネーションの色とサイズを変える方法です。
これはCSSを 加えるだけです。
CSSを書き換える場所の抜粋は下のとおりで、サイズと色はお好みで変えて下さい。
/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
background-color: #bbb;
height: 12px;
width: 12px;
}
/* ページネーションがアクティブな時の色 */
.swiper-pagination-bullet-active {
background-color: #EC008C;
}実際にページネーションのサイズを12px、色をピンクに変えたSwiperが下のCodePenです。
（スマホなどの小さい画面の場合はResultボタンをタップすると実際の表示が見れますよ）
See the Pen Swiper | fade circle arrow | pagination change by s sim (@s-sim) on CodePen.
ページネーション ( pagination ) の位置を変える・外に出す
SIMページネーションのカスタマイズの最後は、スライドの外に出す方法です。
これもCSSにコードを数行加えるだけですが、「!important」を使うので嫌がる人もいるかもしれません。
ですが、最新バージョンのSwiperでは色々試して、うまく出来たのはこの方法だけでした。
/* ページネーション位置 */
.swiper-pagination {
position: relative !important;
margin-top: 20px;
}ページネーションを外に出した結果が下のCodePenです。
（スマホなどの小さい画面の場合はResultボタンをタップすると実際の表示が見れますよ）
See the Pen swiper01 by s sim (@s-sim) on CodePen.
Swiperを複数の箇所で使う
SIMSwiperを複数使う時は、各SwiperでClass名を別々にする必要があります。
まずは完成品をご覧下さい。CodePenですので、コードも全部見れますよ。
（スマホなどの小さい画面の場合はResultボタンをタップすると実際の表示が見れます）
See the Pen Swiper | Multiple by s sim (@s-sim) on CodePen.
htmlの変更点（別々のClass名を加える）
SIMまずは、Class名で、mySwiperとswiper-button-nextとswiper-button-prevとswiper-paginationのあるタグに、Swiper１と２で別々のクラス名を設定する。
下がその抜粋部分のhtmlです。例えば、mySwiperのあるSwiper１の上から３行目のタグには、新たにmySwiper-01（名付け自由）というクラス名を、Swiper２の上から13行目のタグにはmySwiper-02（名付け自由）というクラス名を加えて識別できるようにしています。
同じようにSwiper矢印ボタンとページネーションのタグにも別々のクラス名を加えて識別できるようにします。
<!-- Swiper1 -->
<!-- mySwiperのあるタグ -->
<div class="swiper mySwiper mySwiper-01">
<!-- swiperの左右のボタン -->
<div class="swiper-button-next swiper-button-next-01"></div>
<div class="swiper-button-prev swiper-button-prev-01"></div>
<!-- swiperの画面下部のページネーションのポチポチ -->
<div class="swiper-pagination swiper-pagination-01"></div>
<!-- Swiper2 -->
<!-- mySwiperのあるタグ -->
<div class="swiper mySwiper mySwiper-02">
<!-- swiperの左右のボタン -->
<div class="swiper-button-next swiper-button-next-02"></div>
<div class="swiper-button-prev swiper-button-prev-02"></div>
<!-- swiperの画面下部のページネーションのポチポチ -->
<div class="swiper-pagination swiper-pagination-02"></div>JavaScriptの変更点（htmlで加えたClass名を変える）
SIMあとはJavaScriptのファイルも、さっきhtmlで新たに作ったクラス名に置き換えればOKです。
下がSwiper１のJavaScriptです。２行目のクラス名が”.mySwiper-01“に、paginationとnavigationのクラス名もそれぞれさっきhtmlで作ったクラス名と置き換わっているのが分かると思います。
// スライド01
var swiper = new Swiper(".mySwiper-01", {
slidesPerView: 1, //一度に表示するスライド枚数
spaceBetween: 0, //スライド間の余白
loop: true, //ループさせるか？
speed: 1000, //スライド速度
autoplay:{
delay: 3000, //スライド保持時間
},
pagination: {
el: ".swiper-pagination-01",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next-01",
prevEl: ".swiper-button-prev-01",
},
});そしてこちらがSwiper２のJavaScript。同じ箇所が上と同様に置き換わってますね。
// スライド02
var swiper = new Swiper(".mySwiper-02", {
slidesPerView: 1, //一度に表示するスライド枚数
spaceBetween: 0, //スライド間の余白
loop: true, //ループさせるか？
speed: 1500, //スライド速度
effect: "fade", //スライドをフェードで切り替える
autoplay:{
delay: 3000, //スライド保持時間
},
pagination: {
el: ".swiper-pagination-02",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next-02",
prevEl: ".swiper-button-prev-02",
},
});関連記事
Swiperのスライド拡大アニメーションをCSS追加のみで実装する方法
Swiperに文字アニメーションを追加する方法
まとめ
SIM以上、よく使いそうなパターンのSwiperの使い方とカスタマイズ方法について紹介しました。
