今回は背景画像をズームアップさせながらフェードで切り替えるスライダーを、Swiperを使って実装します。Swiperなどのプラグインを使わなくても実現できますが、ページネションの設定や1ページに複数スライダーを配置することを考えるとプラグインを使ったほうが手軽です。jQueryは使わない(使わなくでも動きます)Swiperのバージョンは4.50以上を使用するデモページを作成したのでまずは確認してみてください。背景画像をズームアップしながらフェードで切り替えるスライダーを実装するSwiperのファイルを読み込むHTMLに書くことCSSに書くことjsに書くこと1ページにスライダーを複数使いたい場合は?背景画像の中にテキストを入れたい場合は?背景画像をズームアップしながらフェードで切り替えるスライダーを実装するまずはSwiperをインストールしましょう。Swiperのファイルを読み込むCDNを使って読み込むのであれば以下の2行をheadの中に読み込めば準備完了です。Swiperの最新バージョンは5.20ですがCDNでは4.51までしか用意されていないのでそちらを読み込みます。CDNの他のバージョンを読み込みたい方は以下のリンクから選んでください。src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>CDNからではなく、直接ファイルを配置したい方は、以下のURLからSwiperのzipファイルをダウンロードしましょう。今回はバージョン5.20を選ぶことにします。(ver4.50以上ならどれでも大丈夫です。)Swiperのバージョンをダウンロードzipファイルを解凍したら、cssフォルダとjsフォルダからswiper.min.cssとswiper.min.jsをそれぞれ見つけてご自身の環境にドラック&ドロップしましょう。swiper.min.cssswiper.min.jsインポートしたファイルはheadに読み込みます。src="./path/to/swiper.min.js"></script>HTMLに書くことSwiperを使用するときのHTMLは以下のようになります。必要なclass名は以下の3つです。ページネーションや左右のページ送りの部分は必要ない場合は消してもかまいません。今回は表示させる前提で説明していきます。class="swiper-button-next"></div></div>CSSに書くこと12秒かけてズームさせて、600pxの高さに背景画像を表示させる設定です。//600pxの高さで表示させる}jsに書くことinit.jsなどのファイルを作成して以下を内容をコピペします。作成したinit.jsはheadに読み込みましょう。}});1ページにスライダーを複数使いたい場合は?1ページに違うエフェクトのスライダーを複数使う場合はjsに以下のように書きます。パラメーターの書き方は一緒です。});HTMLに書くところも少しだけ変わります。swiper-containerのクラス名のところにjsに書いたswiper01、swiper02をそれぞれ追加します。</div>この設定で1ページにそれぞれ違うエフェクトのスライダーを実装できます。背景画像の中にテキストを入れたい場合は?背景画像の上にテキストを乗せることもできます。swiper-slideの中を以下のようにします。</div></div>テキストを中央表示する場合はcssを以下のようにします。フォントサイズや色は好きなものに変更しましょう。bold;}さいごに...今回は背景画像をSwiperを使ってズームアップしながらフェードさせるスライダーを紹介しました。背景画像だけではなく通常の画像としても同じようにズームさせることが可能です。実装するのは以下の記事を参考にしてみてください。WEMO.techSwiperを使って違うエフェクトを試したい方は以下のリンクからパラメーターが見れます。