jqueryプラグインで背景画像を自動スライドショーにする

複数の背景画像を順番に表示していくことができるスライドショーは、jqueryプラグインを使用することで自動スクロールするスライドショーにすることができます。

jqueryプラグインで背景画像を自動スライドショーにするやり方は私自身初めて挑みました。

初めてでも意外とできてしまうもので、使用するjqueryプラグインで背景画像が自動スクロールしてスライドショーとして動作したときは素直に嬉しい。

アウトプット的な復習も兼ねて、背景画像を自動スライドショーにするまでの流れをまとめました。背景画像でスライショーを実装したい方に参考になるかと思います。

使用するjqueryプラグインは「bgswitcher」です。

1. jqueryを読み込みjqueryプラグインをフォルダに配置
2. 背景画像を自動スライドショーにするHTMLとCSS
3. スクロールする背景画像の切り替えをコントロール

jqueryを読み込みjqueryプラグインをフォルダに配置

jqueryプラグインのbgswitcherを使用して背景画像を自動スライドショーにするためには、Weサイトでjqueryプラグインが動作できる環境をjQuery本体を読み込んで整えます。

jQuery本体を読み込むことも踏まえた大まかな手順は以下のとうりです。

jQueryを読み込む
jqueryプラグイン(bgswitcher)のダウンロード
ダウンロードしたJSファイルをフォルダに配置

上記の1、2、3の手順でjqueryプラグインの導入準備をすることで、jqueryプラグインで背景画像を自動のスライドショーにすることができます。

jQueryをCDNで読み込む

jQueryを読み込むには「jQuery本体をダウンロードして読み込む方法」と「CDNを経由して使う方法」がありますが、CDNを経由してjQueryを読み込みます。

CDNで読み込むとjQueryをダウンロードする手間が省け、headタグ内に以下のスクリプトタグをコピペするだけで背景画像をスライドショーにするjQueryプラグインが使えるようになります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

上記のjQueryのスクリプトコードは、背景画像を自動スライドショーにするサイトのheadタグ内に記述します。

バージョン3系の最新のjQueryを使用してますが、jQueryの最新バージョンを確認しておきたい場合はGoogleにホストされているライブラリからCDNのjQueryバージョンを確認できます。

Hosted Libraries | Google Developers

GitHubからbgswitcherをダウンロード

jQuery本体を読み込んだ次は、背景画像を自動スライドショーにすることができるjQueryプラグイン「bgswitcher」のzipファイルをGitHubからダウンロードします。

GitHubの「bgswitcher」のzipファイルは以下のページからダウンロードできます。

GitHubのjquery-bgswitcherダウンロード

GitHubからダウンロードしたbgswitcherのzipファイルは解凍します。解凍後のフォルダ名は「jquery-bgswitcher-master」になります。

そしてjqueryプラグイン「bgswitcher」で背景画像を自動スライドショーにするために必要なファイルはjquery-bgswitcher-masterフォルダを開いた「jquery.bgswitcher.js」ファイルを使用します。

jsフォルダにjquery.bgswitcher.jsを配置

jqueryプラグイン「bgswitcher」のダウンロードファイルに入ってるjquery-bgswitcher-masterフォルダ内の「jquery.bgswitcher.js」は、jsフォルダ内に配置して背景画像を自動スライドショーにするためのjsファイルになってもらいます。

背景画像を自動スライドショーにするWebサイトのフォルダ構造にすでにjsフォルダがある場合は、そのjsフォルダに配置すればjquery.bgswitcher.jsを読み込むときのファイルパスを間違えにくいと思います。

jsフォルダがまだない場合は、フォルダ名を「js」にしてjsフォルダを作成した中にjquery.bgswitcher.jsファイルを格納してください。

jsフォルダの配置場所は、それぞれのサイトのフォルダ構造で適宜になりますが、私の場合は背景画像を自動スライドショーにするHTMLファイルが入ってるフォルダと同じ階層に配置しました。

ここまでの流れで完了しておくことは以下です。

jquery本体を読み込むスクリプトコードをheadに記述
jqueryプラグイン「bgswitcher」の「jquery.bgswitcher.js」ファイルをjsフォルダに配置

上記2点が完了していればオッケーです。

背景画像を自動スライドショーにするHTMLとCSS

jqueryとjqueryプラグインのbgswitcherを読み込み、背景画像を自動スライドショーにする準備が整いました。

次にHTMLでスライドショーを表示する要素をマークアップして、jsフォルダに配置した「jquery.bgswitcher.js」を読み込む記述と、自動スライドショーにする背景画像を指定します。

またCSSでは背景画像のサイズを調整します。

スライドショーを表示するHTML要素

スライドショーを表示するHTML要素は以下のHTMLをbody要素内で表示したい場所に記述します。

<div class="bgimg-slider">
    <h1 class="slider-title">背景画像の上に乗るテキスト</h1>
</div>

divのブロック要素でスライドショーになる背景画像が表示できるようにして、背景画像の上に乗せるテキストやコンテンツが欲しい場合にはdivの子要素をマークアップします。

HTMLにjquery.bgswitcher.jsを読み込む

スライドショーを表示するHTML要素を記述した下あたりにjsフォルダに配置したjquery.bgswitcher.jsをscriptで読み込みます。jquery.bgswitcher.jsの読み込みは</body>直上でも読み込みができます。

<head></head>の間でも読み込んだのですがjquery.bgswitcher.jsをheadで読み込めなかったです。

スライドショーを表示するHTML要素も含めたjquery.bgswitcher.jsを読み込むコードは以下です。私がjqueryプラグインで背景画像を自動スライドショーにするために使用したコードのままです。

<div class="bgimg-slider">
    <h1 class="slider-title">背景画像の上に乗るテキスト</h1>
</div>

<!-- bgswitcher-script -->
<script src="../js/jquery.bgswitcher.js"></script>
<script>
jQuery(function($) {
　$('.bgimg-slider').bgSwitcher({
　　images: ['../images/back.jpg','../images/blue.jpg','../images/paint.jpg'],
　　effect: "drop",
　　easing: "linear"
　});
});
</script>
<!-- bgswitcher-script-end -->

スライドショーを表示するHTML要素の下でjquery.bgswitcher.jsを読み込みました。

そしてjquery.bgswitcher.jsを読み込んだ下には、上の記述のように$(‘.bgimg-slider’)で背景画像の自動スライドショーにするdivのクラス名をセレクタにして、images:の部分でスライドショーに使う背景画像を指定します。

クラス名で要素を指定してるので、例えばスライドショーを表示するHTML要素のクラス名が上のHTMLの「”bgimg-slider”」ではなく「”sample-slider”」にした場合は、$(‘.sample-slider’)とセレクタも変更する必要があります。

jqueryプラグインで自動スライドショーにする背景画像は、imagesやimeagのフォルダ名にして画像フォルダを作成して画像を入れておきパスを指定します。

これによりjqueryプラグインのスライドショーで使う背景画像は、background-imageプロパティがHTMLにインラインで記述される形になって表示できます。

スライドショーにする背景画像のCSS

jqueryプラグインのbgswitcher.jsの読み込みとHTMLに記述したscriptや画像の指定により、HTML要素には背景画像を自動でスライドショーにすることができているので、あとはCSSでスライドショーになる要素のサイズを広げて画像を表示させます。

.bgimg-slider {
    width: 100vw;
    height: 100vh;
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider-title {
    color: #fff;
    font-size: 48px;
    line-height: 1.5;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
}

CSSで背景画像を表示するボックスのサイズをvw、vhで指定します。

vwでビューポートの幅に対する割合
vhでビューポートの高さに対する割合

背景画像サイズを%やpxで指定するのも可能ですが、背景画像を自動スライドショーにするパターンが画面いっぱいのスライドショーにする場合では、ビューポートを基準に幅と高さを指定するといいかと思います。

ここまでの時点の流れが間違いなく進んでいれば、ブラウザにjqueryプラグインで背景画像を自動でスライドショーにするページを開くと自動スライドショーで背景画像がスクロールしています。

スクロールする背景画像の切り替えをコントロール

jqueryプラグインのbgswitcherで背景画像を自動スライドショーにするときには、スクロールする背景画像の切り替えをコントロールすることができます。

キー	型	初期値	説明
start	boolean	true	`$.fn.bgswitcher(config)`をコールした時に切り替えを開始する
loop	boolean	true	切り替えをループする
interval	number	5000	切り替えの間隔
effect	string	fade	エフェクトの種類
shuffle	boolean	false	背景画像の順番をシャッフルする
duration	number	1000	エフェクトの時間
easing	string	swing	エフェクトのイージング