【jQuery・BgSwitcher】画面に合わせたスライドショーの作り方

JavaScript
2020.11.07
スポンサーリンク

HPを作っていて画面いっぱいの画像、それもレスポンスに合わせたスライドショーを作ってみたいですよね。今回はパソコン、スマホの大きさに自動的に合い、スライドショーが背景で行われるコードを紹介します。

今日作る参考サイトはこちら

柏市／横浜市神奈川区の音楽教室【ラッドミュージックスクール】
千葉県柏市/横浜市神奈川区大口の音楽教室。ポピュラー・ジャズ中心。各楽器の個人レッスン他バンド・アンサンブルレスンも人気！無料体験／音楽教室見学随時。ピアノやボーカル以外にもギター、ベース、管楽器、ドラムなど幅広く対応。
www.radmusicschool.com

柏、横浜に店舗を置く、ラッドミュージックスクールのHPです。こちらのトップのメインビジュアルはスライドショーで出来ています。

今回はこちらのスライドショーをBgSwitcherを使って作っていきます。

スポンサーリンク

HTML編

スライドショーをいれる箱を作ります

まずはHTMLでスライドショーをいれる箱を作ります

HTMLは至ってシンプルです。

<section>
	<div class="conA">
  </div>
</section>

これで終了です。

<head>にjQueryで使用するフレームワークを入れます

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.BgSwitcher/0.4.3/jquery.bgswitcher.min.js" integrity="sha512-cwDh42ooq48+o2kkbsn72Kwd9/Ghc34d48DFlNfOCRFJ1dM6EeIFs9d7PIBa4SSv6enwQAYmxsLZGgKOV0yE1A==" crossorigin="anonymous"></script>

BgSwitcherのcdnです。ファイルをダウンロードして入れることも可能ですが今回はcdnで入れます。

CSS編

.conA {
	height: 100vh;
	min-height: 450px;
}

1,箱の大きさを画面いっぱいに設定します

heightを100vhに設定することで高さが、表示している画面と同じ長さに設定されます。つまり開いているブラウザいっぱいに表示されます。vhについては以下の記事に詳しく書いてあります。

【レスポンシブ対応】CSSで画面いっぱいに表示する
CSSで画面いっぱいに表示する方法 コーポレートサイトやポートフォリオサイトをみるとまずはじめに画面いっぱいの画像があることが多いです。今回はHTML,CSSにてパソコンでもスマホでも画面いっぱいに表示させる方法をご紹介します。 参考サイト...
yotamatsumaru.jp
2020.09.25

横幅に関して、widthプロパティの初期値はauto（自動）で、CSSで指定しない限り、要素の幅は自動で決められることになります。

自動で決まりますが親要素によって決まり方が変わります。今回の場合親要素<section>も自動で設定しており横幅いっぱいな為、class=”conA”も横幅が同じになります。

2,min-heightで最低限の高さを指定する

min-height: 450px;で高さの最低限の大きさを決めます。これはなくても正常に使えますがあることによってブラウザを極端に小さく見たときでもメインビジュアルの高さが450pxは保たれ、しっかり表示される仕組みです。

jQuery編

コードの解説

jQuery(function ($) {		
				$('.conA').bgSwitcher({
					images: ['入れたい写真のリンク', '入れたい写真のリンク', '入れたい写真のリンク'], // 切り替える背景画像を指定
					interval: 6000, // 背景画像を切り替える間隔を指定 3000=3秒
					loop: true, // 切り替えを繰り返すか指定 true=繰り返す　false=繰り返さない
					effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
					duration: 600, // エフェクトの時間を指定します。
					easing: "swing" // エフェクトのイージングをlinear,swingから指定
				});			
		});

まずはこれをコピーしてHTMLもしくはJSファイルに貼り付けてください。HTMLの場合は<script>タグの中に記入してください。

imagesで写真を選ぶ

images: [‘入れたい写真のリンク’, ‘入れたい写真のリンク, ‘入れたい写真のリンク’],

BgSwitcherのプロパティのimagesで写真を入れます。’’で写真のリンクを記入しカンマで区切れば、入れた分だけ写真が出てきます。入れすぎるとサイトが重くなってしまうので、画像サイズと相談して決めてください。

intervalで切り替える速度を調整

interval: 6000,で画像を切り替える秒数を変更します。サンプルでの時間は6000->6秒となっています。1000で1秒なので好きな感覚で調整してください。

loopで繰り返しを設定

loopで繰り返しの設定を行います。切り替えを繰り返すか指定 true=繰り返す　false=繰り返さないです。基本的にloop: true,でいいと思います。

effectで切り替えるエフェクトを変更

サンプルではeffectをフェードにしています。エフェクトの種類をはade,blind,clip,slide,drop,hideとあるのでお好きなものに変更してください

durationでエフェクトの切替時間を調整

サンプルではduration: 600,となっています。速すぎてもブラウザの処理が追いつかず、遅すぎてもイライライラするので600くらいがちょうどいいかと思います。

easingでエフェクトの緩急を設定

エフェクトのかかり具合を設定します。linearは一定の割合で変化し、swingは二次関数のような緩急がついたエフェクトになります。

以上で設定終わりです。意外と簡単に実装できるのでぜひ試してみてください

コメント

タイトルとURLをコピーしました