・Swiperのドットってカスタマイズ可能？
こんな疑問にお答えします。
Swiperにてデフォルトでは、小さい丸のドットが反映されますよね。
ただデザインによっては、大きさや色を変えたり、画像で反映したいことがあるはず。
実はそれSwiperでは簡単にカスタマイズ可能です。
すぐにできるよ！
ということで、この記事では「ドット／ページネーションのカスタマイズ方法」について解説していきます！
swiper自体の作り方については下記記事を参考に↓
【簡単】Swiperの使い方｜初心者向けに解説【オプション】 ドット／ページネーションのカスタマイズ方法
目次
【Swiper】ドット／ページネーションのカスタマイズ方法【大きさや色】
まずドットの大きさや色をカスタマイズする方法を紹介していきます。
そんなサンプルがこちら↓
See the Pen swiper ドットカスタマイズ➀ by jito-coder (@jito-coder) on CodePen.
紺色で大きい四角形のドットになっていますよね。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide01">
<img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
</div>
<div class="swiper-slide swiper-slide02">
<img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
</div>
<!-- 省略 -->
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>.swiper-pagination-bullet {
width: 40px;
height: 40px;
margin: 0 10px !important;
background-color: #000066;
border-radius: 0;
}window.onload = function() {
const swiper = new Swiper(".swiper", {
spaceBetween: 20,
slidesPerView: 1,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}コードの中で重要な点がこちら↓
- 通常通りのスライダーを実装
- 「.swiper-pagination-bullet」に対して色や大きさを指定
順に解説してきます。
まず通常通りのスライダーを実装するHTMLを組み立てます。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide01">
<img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
</div>
<div class="swiper-slide swiper-slide02">
<img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
</div>
<!-- 省略 -->
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>ここに関してはいつも通りでOKです。
カスタマイズは簡単で「.swiper-pagination-bullet」に対してCSSを記述するだけです。
下記のように大きさや色、間隔や角を調整できます。
.swiper-pagination-bullet {
// 大きさを調整
width: 40px;
height: 40px;
// ドット同士の間隔を調整
margin: 0 10px !important;
// 背景色を指定
background-color: #000066;
// 角を調整
border-radius: 0;
}ここはデザインに応じて調整してあげましょう。
【Swiper】ドット／ページネーションのカスタマイズ方法【画像を使う】
次に画像を使ってドットのカスタマイズ方法を紹介していきます。
そんなサンプルがこちら↓
See the Pen swiper ドットカスタマイズ➁ by jito-coder (@jito-coder) on CodePen.
チェックマークの画像がドットになっていますよね。
といっても先ほどとコードはほぼ同じで、CSSを変えたぐらいです。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide01">
<img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
</div>
<div class="swiper-slide swiper-slide02">
<img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
</div>
<!-- 省略 -->
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>// 全体のドットに対して
.swiper-pagination-bullet {
width: 50px;
height: 50px;
background-image: url(https://jito-site.com/wp-content/uploads/2023/12/swiper-page01.png);
background-repeat: no-repeat;
background-size: contain;
background-color: transparent;
border-radius: unset;
opacity: 1;
}
// アクティブなドットに対して
.swiper-pagination-bullet-active {
background-image: url(https://jito-site.com/wp-content/uploads/2023/12/swiper-page02.png);
}window.onload = function() {
const swiper = new Swiper(".swiper", {
spaceBetween: 20,
slidesPerView: 1,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}コードの中で重要な点がこちら↓
- ドットに対して背景画像を指定
- アクティブなドットに対して別の背景画像を指定
順に解説してきます。
まず全体のドットに対して、背景画像用のCSSを記述していきます。
画像の場合も「.swiper-pagination-bullet」に対して指定すればOK。
大きさ、背景画像を指定しましょう。
.swiper-pagination-bullet {
// 大きさを指定
width: 50px;
height: 50px;
// 背景画像を指定
background-image: url(https://jito-site.com/wp-content/uploads/2023/12/swiper-page01.png);
background-repeat: no-repeat;
background-size: contain;
// 背景色を透明に
background-color: transparent;
// 角丸をなくす
border-radius: unset;
// 透過をなくす
opacity: 1;
}注意点がデフォルトの背景色や角丸、透過をなくすことですね。
これをしないと画像が欠けたり、透過するので忘れずに指定すべし。
あとはアクティブなドットに対してCSSを記述すれば完成です。
その場合「.swiper-pagination-bullet-active」クラスに対して指定すればOKです。
別の画像を指定してあげましょう。
.swiper-pagination-bullet-active {
background-image: url(https://jito-site.com/wp-content/uploads/2023/12/swiper-page02.png);
}これで完成です！
【Swiper】ドット／ページネーションのカスタマイズ方法【個別に変更】
最後にドットそれぞれ個別にカスタマイズする方法を紹介しますね。
それがこちら↓
See the Pen swiper ドットカスタマイズ➂ by jito-coder (@jito-coder) on CodePen.
それぞれ色が異なっているかと思います。
やり方は簡単で「nth-of-type()」を使うことです。
.swiper-pagination-bullet:nth-of-type(1) {
background-color: orange;
}
.swiper-pagination-bullet:nth-of-type(2) {
background-color: red;
}
.swiper-pagination-bullet:nth-of-type(3) {
background-color: blue;
}
.swiper-pagination-bullet:nth-of-type(4) {
background-color: green;
}これで表示順それぞれに対して、個別にCSSを変えればカスタマイズできます。
ちなみにドットを枠外に出したい方は、下記記事を参考に↓
【解決】Swiperで矢印とドットを外に出す方法【サンプルあり】 【Swiper】ドット／ページネーションのカスタマイズ方法【画像】：まとめ
- 「.swiper-pagination-bullet」に対して色や大きさを指定
- 「.swiper-pagination-bullet」に対して画像を指定、「.swiper-pagination-bullet-active」に対して別画像を指定
- 個別にカスタマイズしたい場合「nth-of-type()」を使う
Swiperでドットをカスタマイズしたい時はためしてみてね！
