先日模写したのPAS-POLサイトですが、
メインビジュアルの背景画像をまだスライドショーにしてなかったのでスライドショーにしました。
ここのスライドショーは背景画像がふわっと切り替わるやつなのですが、「どうやるのかな～？」と調べたところ、「jQuery.BGSwitcher」というプラグインが良さげだとわかり、それを使う事にしました。
ちなみに、前回使ったjQueryスライダー系プラグイン「slick」にロゴや文字をpositionで配置して、slickを無理やり背景画像スライダーのようにする手もありましたが、
なんかスマートじゃないのでやめました。
背景画像がふわっと切り替わるjQuery.BgSwitcherの使い方。
jQuery.BGSwitcherの使い方は色々なサイトに書いてあるのですが、微妙にわかりにくい。
なので、私なりに簡単に解説していきたいと思います。
jQuery.BGSwitcherをダウンロード。
まずjQuery.BGSwitcherのサイトにアクセスします↓
指定した背景画像をx秒毎に切り替えるjQueryプラグイン – Rewish
→「ダウンロード」下の「jquery.bgswitcher.js」を右クリック。
(これがまずわかりにくい。私は左クリックしてしまい、その後どうしたらいいのかわからなくなりました。)
→「名前を付けてリンク先を保存」
→自分の作っているサイトのフォルダに貼り付けます。
main.jsファイルにコードを記述。
先程とは別の、main.jsファイルに以下のコードを書きます↓
jQuery(function($) {
$('.bg-slider').bgSwitcher({
images: ['img/1.jpg', 'img/2.jpg', 'img/3.jpg'], // 切り替える背景画像
interval: 5000, // 背景画像を切り替える間隔 1000=1秒
loop: true, // 切り替えを繰り返すか true=繰り返す false=繰り返さない
shuffle: true, // 背景画像の順番をシャッフルするか true=する false=しない
effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
duration: 2000, // エフェクトの時間 1000=1秒
easing: "swing" // エフェクトのイージングをlinear,swingから指定
});
});
imagesの[ ]内に、表示させたい画像ファイル名を入れます。
その下の項目を、コメントを参照に色々いじることでカスタマイズできます。
CSSファイルにコードを記述。
CSSファイルに以下のコードを書きます↓
.bg-slider {
width: 100%;
height: 100vh;
background-position:center center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.bg{
color: white;
font-size: 100px;
font-weight: bold;
text-align:center;
}
widthとheightは○○pxなどと変えられますが、width:100%、height:vhの方がウィンドウいっぱいに背景画像が表示されるのでオススメです。
(width:vwというのもありますが、これだとスクロールバー領域のサイズも含まれ環境や状況によって微妙にサイズが変わってきてしまう可能性があるので、width:100%の方がおすすめです。)
index.htmlファイルに読み込む。
index.htmlファイルのheadタグ内でjQueryを読み込みます↓
<head>
...
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
ちなみに私が今まで使っていたjQuery/1.12.4バージョンでも動いたので、バージョンはなんでもいいと思います。
bodyタグの直前で、jquery.bgswitcher.jsとmain.jsを読み込みます↓
<script src="jquery.bgswitcher.js"></script>
<script src="main.js"></script>
</body>
index.htmlにコードを記述。
最後に、index.htmlにこのように記述します↓
<div class="bg-slider">
<h1 class="bg">BgSwitcher テスト</h1>
</div>
これで、このdivの間の背景画像がふわっと切り替わるスライドショーになります。
もしこの通りにやっても動かない場合は。
もしこの通りにやっても動かない場合は、ファイルの階層や名前は合っていますか？
例えばjquery.bgswitcher.jsファイルやmain.jsファイルを、jsフォルダに入れた場合は、
読み込む際の書き方は
js/jquery.bgswitcher.js
js/main.js
となります。
あとは、「img」なのを「image」と書いていたり。
この辺を確認しましょう。
以上、jQuery.BGSwitcherの使い方でした。
テックアカデミーが初心者向け副業コースを始めました↓
コメント