2019/12/11背景画像をフェードで切り替えるスライダーswiper.jsの使い方(ページネーションあり)背景画像をフェードで切り替えて、さらにページネーションも使えるスライダーを紹介します。背景画像を全画面で表示したいときに便利なスライダーです。最新バージョンのSwiperの使い方はこちらの記事に書いたので参考にしてみてください。Swiperで実装する方法2019.12.11まずはデモページを作ったので見てみましょう。swiperのバージョンは3.4.2を使ってください。それ以上のバージョンでは機能しないので注意してください。背景画像をフェードで切り替えるスライダーは他にもありますが、ページネーションがついていません。swiperはページネーションの有る無しを自由に設定できるのがポイントです。それではさっそく説明していきます。swiperに必要はファイルを読み込む配布サイトからswiper.jsをダウンロードしましょう。バージョンはかならず3.4.2を選んでください。ダウンロードするとdistというフォルダの中にあるcssとjsフォルダから以下の2つのファイルを取り出して、サイトにインポートします。・swiper.min.js・swiper.min.cssインポートできたらheadの中に以下のコードを挿入してください。フォルダへのパスはご自分の環境に合わせて変えてくださいね。init.jsというファイルはswiperを動かすために使うので、ご自身で作成しておきましょう。この段階では何も書かれていなくて大丈夫です。src="./path/to/init.js"></script>スライダーを表示させたい場所を整えるswiperの使うときの基本の形は以下になります。swiper専用のclass名が決まっているので変えないようにしましょう。ピンク色のところはご自身で使いたい画像のパスを設定してください。今回はページネーションもすべて表示させる設定にしています。class="swiper-scrollbar"></div></div>swiperを動かす定義を書くご自身で作成したinit.jsの中に以下のコピペします。フェードで自動で開始、ループの設定です。スピードなどの数値はお好みで調整してください。//全画面表示}これで基本的な設定は終わりです。スライダーが動かない場合や表示がおかしいときは、ファイルパスに間違いがないか確認してみてください。スライダーの上にテキストをのせたい場合は?背景画像をフェードで切り替えるだけではなく、スライダーの上にテキストをのせたい場合はデモページにコードを書いておいたので参考にしてみてください。各スライダーの上にテキストがあり、スライダーがフェードするタイミングで、同じようにテキストもフェードで切り替わります。ページネーションのデザインを変えるには?左右のページ送りはデフォルトでは青色の矢印になっています。これは画像で設定されているので、変更したい場合はご自身でお好きな矢印を用意してCSSで上書きする必要があります。丸型のページネーションも現在のスライドを表している丸はデフォルトでは青色です。色を変える場合はこちらもCSSで上書きしなくてはいけません。デモページでは矢印を白色のものに変更し、丸型のページネーションも白色に変更してあります。コードも書いてあるので参考にしてみてください。デモページの矢印は以下のサイトからお借りました。