スライダーを簡単に実装できるjQueryのプラグイン「jquery.bxslider.js」。

とにかく応用が効くので何でもかんでもbxsliderにしがちです。
今度はbxsliderを使い、背景画像をスライドさせる方法をご紹介します。

1. bxsliderの基本的な使い方
2. HTMLとCSSとjavascript
3. bxslider関連記事

bxsliderの基本的な使い方

下記から必要ファイルをダウンロードします。
jQuery Content Slider | Responsive jQuery Slider | bxSlider

ダウンロード後、必要なファイルを読み込みます。

<link rel="stylesheet" href="jquery.bxslider.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>

HTMLとCSSとjavascript

HTML

<div id="visual">
<ul class="bxslider">
<li style="background-image:url(img/img01.jpg);"></li>
<li style="background-image:url(img/img02.jpg);"></li>
<li style="background-image:url(img/img03.jpg);"></li>
</ul>
</div>
<div id="contents">
<h1 id="logo"><img src="img/logo.svg" title=""></h1>
<p>テキストテキスト</p>
</div>

li内にimgタグを入れるのではなく、liの背景に指定してください。

CSS

#visual {
	position: absolute;
	/* 背景を固定したい場合 absolute を fixed に変える */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}
.bx-wrapper {
	border: 0;
	box-shadow: none;
}
.bxslider li {
	height: 100vh;
	background: center/cover no-repeat;
}
#logo {
	/* 設定値はお好みで */
	display: flex;
	align-content: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
}
#logo img {
	/* 設定値はお好みで */
	display: block;
	width: 200px;
	height: auto;
}

とりあえずロゴ画像を入れる想定としていますが、このへんはお好みでカスタマイズしてください。

javascript

$(function() {
	$('.bxslider').bxSlider({
		mode: 'fade',
		speed: 1000,
		pause: 4500,
		auto: true,
		pager: false,
		controls: false,
		touchEnabled: false
	});

	// 画面リサイズ時にスライド幅を再設定
	$(window).on('resize', function(){
		var windowWidth = $(window).width();
		$('.bxslider li').width(windowWidth)
	});
});

画面リサイズにも対応しておりますので、なんとなくレスポンシブです。

bxslider関連記事

bxsliderに関する記事は他にもありますので、よろしければどうぞ

• bxsliderで100％幅の背景画像をスライド（切り替え）させる
• スライド要素の数でbxSliderの挙動を変え、想定の数以下の場合はスライドさせない
• jquery.heightLine.jsをbxSliderで使い、カルーセル表示で要素の高さを揃える方法
• bxsliderでslideWidthの値を％指定してレスポンシブ時に「スライドの数」を変えずに「スライドの幅」を変える