Swiperを使って、フェードで切り替わるスライダーを作りましたので、記録しておきます。
メインビジュアルでも使えるように、スライドの最後の１枚で止まる仕様にしました。
もちろん、無限ループも簡単にできます！
- Swiperのスライドを最後で止める方法！
- Swiperのスライドをフェードで表示させる方法！
- Swiperが動かない、動作がおかしいときの解決方法
【Swiper】画像をフェードインで切り替えるスライダー！
まずは、今回作成するスライダーの完成版を載せておきます。
See the Pen 【swiper】エフェクト（fade/outSlide/slide-stop） by 1buk1 (@1buk1) on CodePen.
スライドは、読み込まれたら、１枚目から設定したタイミングでスライド開始します。
最後のスライドに行ったら、停止する仕様です。
ページネーションと画像スライド操作のボタン（矢印）が表示されていますが、こちらは非表示にすることも可能です。
ページネーションと画像操作のボタン（矢印）を非表示にしたパターン！
See the Pen 【swiper】エフェクト（fade/autoSlide/stopOnLastSlide） by 1buk1 (@1buk1) on CodePen.
メインビジュアルに使うなら、ページネーションとボタンは不要ですかね。
非表示にしたい場合は、簡単です。
以下の記述を削除してもらえればOKです！
<!-- ナビゲーションの追加 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- ナビゲーションの追加 -->
<!-- ページネーションの追加 -->
<div class="swiper-pagination"></div>
<!-- ページネーションの追加 -->JavaScriptは、以下が不要ですのでHTML同様に削除してください。
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},上記２箇所のHTMLとJavaScriptを削除するだけで、ページネーションとボタンは削除されます。
画像の切り替えをフェードインにするオプション。
フェードインの画像切り替えを実装するには、以下のオプションを追加します。
const swiper = new Swiper('.swiper', {
effect: 'fade', // フェードアニメーション
});オプションを１つ追加するだけで完了します。
最後のスライドで自動再生を停止させる方法。
以下のオプションを追加することで、最後のスライドで自動再生を停止させることができます。
const swiper = new Swiper('.swiper', {
autoplay: { // 自動再生の設定
stopOnLastSlide: true, //ture:最後のスライドで停止させる
},
});Swiperが動作しないときの対処方法。
Swiperが動作しないときは、以下の項目を確認してみてください。
- ライブラリが正しく読み込まれているか。
- ライブラリ、Swiper初期化の記述は正しいか。
- HTMLの記述は正しいか。
- ライブラリのバージョンにあった記述ができているか。
エラーの解決方法、動作不良の詳細は、【Swiperの基本】シンプルで美しいスライダーを作成する方法！記事を参考に記述を確認してみてください。
下記リンクから、該当ページの項目に飛べます！
Webサイトでスライダーを使用すると、コンテンツを魅力的に見せることができます。 しかし、スライダーを自分で一から実装するのは難しく、手間がかかます。 そんな時に役立つのが「Swiper」というライブラリです。 Swip[…]
