Swiperの画像切り替えを、横スライドから「フェード」に変えたいな。
こんにちは。
フリーランスWebコーダーの、たけちです。
今回は、Swiperの画像切り替えを、デフォルトの横スライドから「フェード」に変える方法を解説します。
「Swiperの画像切り替えをフェードに変える方法が知りたい」
「画像をふわっと表示させたい」
「スライドを自動で切り替える場合は、どうすればいいの？」
こんな疑問をお持ちの方は、ぜひ最後まで読んでください！
Swiperの画像切り替えを「フェード」に変更する方法
まずは、基本のSwiperを用意します。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/image1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./img/image2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./img/image3.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>const swiper = new Swiper('.swiper', {
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});Swiperのデフォルトの画像切り替え方式は「横スライド」ですが、オプションを使うことで「フェード」に切り替えることができます。
フェードに切り替えるには、effectを'fade'とすればOKです。
const swiper = new Swiper('.swiper', {
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
effect: 'fade', //追加 フェード機能をONにする
});注意点は、fadeは必ずシングルクォーテーション（''）で囲むという点です（ダブルクォーテーションでもOK）。
クォーテーションがないと、コンソールエラーが発生してSwiper自体が動かなくなるので、注意しましょう。
ふわっとフェードさせたい場合
画像を「ふわっ」と表示させたい場合は、speedパラメーターを使います。
speedには「ミリ秒」の値を渡し、値が大きいほど「ふわっと度」が上がります。
const swiper = new Swiper('.swiper', {
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
effect: 'fade',
speed: 1000, //追加
});ただ、値が大きすぎるとコッテリしすぎるので、クライアントさんやデザイナーさんとよく相談しましょう。
自動で画像を切り替えたい場合
矢印やページネーションをクリックせず、自動でスライド画像を切り替えたい場合は、autoplayパラメーターを使います。
なお、autoplayは必ずdelayとセットで使い、delayの値を変えることで画像を切り替えるタイミングを調整します。
delayの値を大きくするほど画像の切り替えスピードは遅くなり、ユーザーにゆっくり画像を見てもらうことができるので、情報が伝わりやすくなるメリットがあります。
反対に、画像の切り替えタイミングが早すぎると、情報が伝わりづらくなるリスクも。
特に、画像にリンクを設定している場合、切り替えのタイミングが早すぎるとユーザーがクリックしようとしているにもかかわらず画像が切り替わってしまい、ストレスを感じてしまいます。
autoplayによる画像の切り替えタイミングも、慎重に打ち合わせして決定しましょう。
まとめ
今回は、Swiperの画像切り替えを「フェード」に変更する方法を解説しました。
内容をまとめると、次の通りです。
Swiperのフェード切り替えは頻繁に使用するので、この機会にポイントを押さえておきましょう。