背景画像をフェードで切り替えるスライダーswiper.jsの使い方（ページネーションあり）
背景画像をフェードで切り替えて、さらにページネーションも使えるスライダーを紹介します。背景画像を全画面で表示したいときに便利なスライダーです。
※2019/12/5 追記
最新バージョンのSwiperの使い方はこちらの記事に書いたので参考にしてみてください。
まずはデモページを作ったので見てみましょう。swiperのバージョンは3.4.2を使ってください。それ以上のバージョンでは機能しないので注意してください。
背景画像をフェードで切り替えるswiper.jsの使い方
背景画像をフェードで切り替えるスライダーは他にもありますが、ページネーションがついていません。swiperはページネーションの有る無しを自由に設定できるのがポイントです。
それではさっそく説明していきます。
swiperに必要はファイルを読み込む
配布サイトからswiper.jsをダウンロードしましょう。バージョンはかならず3.4.2を選んでください。
ダウンロードするとdistというフォルダの中にあるcssとjsフォルダから以下の２つのファイルを取り出して、サイトにインポートします。
・swiper.min.js
・swiper.min.css
インポートできたらheadの中に以下のコードを挿入してください。フォルダへのパスはご自分の環境に合わせて変えてくださいね。
init.jsというファイルはswiperを動かすために使うので、ご自身で作成しておきましょう。この段階では何も書かれていなくて大丈夫です。
<!-- cssの読み込み -->
<link rel="stylesheet" href="./path/to/swiper.min.css">
<!-- jqueryの読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./path/to/swiper.min.js"></script>
<script src="./path/to/init.js"></script>
スライダーを表示させたい場所を整える
swiperの使うときの基本の形は以下になります。swiper専用のclass名が決まっているので変えないようにしましょう。ピンク色のところはご自身で使いたい画像のパスを設定してください。
今回はページネーションもすべて表示させる設定にしています。
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image: url('./images/fadeslide01.jpg');">
</div>
<div class="swiper-slide" style="background-image: url('./images/fadeslide02.jpg');">
</div>
<div class="swiper-slide" style="background-image: url('./images/fadeslide03.jpg');">
</div>
</div>
<!-- pagination -->
<div class="swiper-pagination"></div>
<!-- navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
swiperを動かす定義を書く
ご自身で作成したinit.jsの中に以下のコピペします。フェードで自動で開始、ループの設定です。スピードなどの数値はお好みで調整してください。
<!-- init.jsに書くこと -->
$(function(){
$(window).on('load',function() {
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
slidesPerView: 1,
spaceBetween: 0,
centeredSlides : true,
speed: 2500, //2.5秒かけてfade
autoplay: 4500, //4.5秒後に次のスライドへ
effect: 'fade', //フェード の指定
pagination: '.swiper-pagination', //ページネーション（丸型）を使う
paginationClickable: true, //ページネーションのクリックを有効にする
nextButton: '.swiper-button-next', //右のページ送りを使う
prevButton: '.swiper-button-prev', //左のページ送りを使う
autoplayDisableOnInteraction: false //autoplayの有効化
});
});
});
CSSで見た目を整える
<!-- 画像部分 -->
.swiper-wrapper .swiper-slide {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
height: 100vh; //全画面表示
}
これで基本的な設定は終わりです。スライダーが動かない場合や表示がおかしいときは、ファイルパスに間違いがないか確認してみてください。
スライダーの上にテキストをのせたい場合は？
背景画像をフェードで切り替えるだけではなく、スライダーの上にテキストをのせたい場合はデモページにコードを書いておいたので参考にしてみてください。各スライダーの上にテキストがあり、スライダーがフェードするタイミングで、同じようにテキストもフェードで切り替わります。
ページネーションのデザインを変えるには？
左右のページ送りはデフォルトでは青色の矢印になっています。これは画像で設定されているので、変更したい場合はご自身でお好きな矢印を用意してCSSで上書きする必要があります。
丸型のページネーションも現在のスライドを表している丸はデフォルトでは青色です。色を変える場合はこちらもCSSで上書きしなくてはいけません。デモページでは矢印を白色のものに変更し、丸型のページネーションも白色に変更してあります。コードも書いてあるので参考にしてみてください。
デモページの矢印は以下のサイトからお借りました。
