【超簡単】背景画像をスライドショーのように切り替えるプラグイン【BgSwitcher】

今回は背景画像をスライドショーのように自動で切り替わるプラグイン「bgswitcher」の使い方を紹介します。

自分自身のポートフォリオを作ったのですが、その時、写真をうまいこと簡単にスライドショーっぽくならないかなーと、いろいろ調べていたところ、このプラグインにたどり着きました。

このプラグインはオプションで画像の切り替え方も細かく指定できて便利です。

以下、実装方法についてです。

スポンサードサーチ

BgSwitcherの使い方

CSS使って実装する方法もあると思いますが、このプラグイン圧倒的にラクです。

では、早速実装していきましょう。

まずはGitHubからbgswitcher.jsをダウンロードします。

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

また、ダウンロードしたZIPファイルで必要なのはjquery.bgswitcher.jsだけです。このファイルをJSフォルダに格納してください。

JSはこんな感じです。ファイル名（js/jquery.bgswitcher.jsのjs部分）はそれぞれ自身のものに合わせてください。

jQuery本体の読み込みも忘れずにお願いします。（今回はCDNで読み込みしています。）

次にHTMLです。

<div class="bg-slider">
  <h1 class="bg-slider__title">タイトルを入れてください</h1>
</div>

画像の上にタイトル等、文字を入れたい人は入れてください。

続いてCSSです。

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

widthとheightに関しては、100vw、100vhで画面いっぱいに広がりますが、

レスポンシブ対応が微妙だったので、width:100%,height100%またはautoなどしてみてください。

続いてJavaScriptです。

$(window).load(function() {
  $('.bg-slider').bgSwitcher({
    images: ['images/1.jpg', 'images/2.jpg', 'images/3.jpg'], // 切り替える背景画像を指定
    interval: 4000, // 背景画像を切り替える間隔を指定 3000=3秒
    loop: true, // 切り替えを繰り返すか指定 true=繰り返す　false=繰り返さない
    shuffle: true, // 背景画像の順番をシャッフルするか指定 true=する　false=しない
    effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
    duration: 2000, // エフェクトの時間を指定します。
    easing: "swing" // エフェクトのイージングをlinear,swingから指定

  });

});

imagesに好きな画像を読み込んでください。

せっかくなので、オプションも細かく設定してみてしっくりくるものを選んでみてください。

上にも書いてありますが一応まとめておきます。

BgSwitcher　オプション

オプション	説明
interval	背景画像を切り替える間隔を指定 3000=3秒
loop	切り替えを繰り返すか指定 true=繰り返す　false=繰り返さない
shuffle	背景画像の順番をシャッフルするか指定 true=する　false=しない
effect	エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
duration	エフェクトの時間を指定します。
easing	エフェクトのイージングをlinear,swingから指定