Fluid Image 対応のフリックで動作するスライドショーを実装する

公開日：2014年9月20日
最終更新日：2019年4月8日

スマートフォンサイトでよく採用されているフリックで動作するスライドショーですが、レスポンシブWebデザインや端末の向きにかかわらず対応するため、画像がスクリーンサイズの100%に伸縮するよう実装してみます。

スライドショーには便利な JavaScriptライブラリや jQueryプラグインがたくさんあります。
その中で、シンプルで動作が軽快な「flipsnap.js」を今回は使ってみます。

これまでいくつかプラグインを使ってみましたが、環境によっては動作が安定しないものもありました。flipsnap は iOS, Android, PC とすべてにおいてスムーズに動作し、おすすめのライブラリです。

この記事では flipsnap のデモページの記述を参考にして解説しています。
最初は画像サイズが固定のサンプルを示し、それからサイズが可変する Fluid Image に対応するようコードを追加します。

最終的に作成するスライドショーは以下のようになります。
デスクトップPCでも動作しますので、マウスでフリック動作をしてみてください。

【コンテンツ】

flipsnap.jsをダウンロードし読み込みコードをHTMLに記述する
表示する画像のHTMLコードを作成する
インジケーターとボタンのHTMLコードを作成する
スライドショーのCSSコードを作成する
スライドショーのJavaScriptコードを作成する
Fluid Image 対応のコードを追加する

【記事執筆時の環境】
flipsnap 0.6.2
jQuery本体 1.11.1

flipsnap.jsをダウンロードし読み込みコードをHTMLに記述する

以下のページにアクセスし、ライブラリをダウンロードしてください。
使い方やデモページもありますので、基本的にはこのページの記述に従います。
http://pxgrid.github.io/js-flipsnap/

ダウンロードしたZIPファイルに含まれている「flipsnap.min.js(もしくはflipsnap.js)」をサイトのディレクトリに配置します。

このライブラリファイルと、これから作成するJavaScriptコードを記述したファイル(flipgallery.jsとします)、およびjQuery本体を読み込むコードをHTMLのhead要素内に記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/flipsnap.min.js"></script>
<script type="text/javascript" src="js/flipgallery.js"></script>

表示する画像のHTMLコードを作成する

画像はそれぞれ、"item" クラスをつけた要素で囲みます。
その外側にouter要素とinner要素を２重にして囲みます。

クラス名は任意ですが、あとでJavaScriptコードを作成するときに使います。
以下はサンプルコードですが、最初は画像サイズを固定にしています。

<div class="gallery-box"><!-- outer element -->
	<div class="gallery-box-inner"><!-- inner element -->
		<div class="item"><img src="img/resort1.jpg" alt="" width="320" height="100"></div>
		<div class="item"><img src="img/resort2.jpg" alt="" width="320" height="100"></div>
		<div class="item"><img src="img/resort3.jpg" alt="" width="320" height="100"></div>
		<div class="item"><img src="img/resort4.jpg" alt="" width="320" height="100"></div>
	</div>
</div>

</div>

インジケーターとボタンのHTMLコードを作成する

単純にフリック動作で画像がスライドするだけなら必要ありませんが、画像の何枚目を表示しているか示すインジケーターと、次の画像および前の画像に移動するボタンをつけてみます。

それらのパーツを加えたHTMLコードは以下になります。全体を囲んだ要素に「id="photo"」を設定しています。

<div id="photo">
	<div class="gallery-box"><!-- outer element -->
		<div class="gallery-box-inner"><!-- inner element -->
			<div class="item"><img src="img/resort1.jpg" alt="" width="320" height="100"></div>
			<div class="item"><img src="img/resort2.jpg" alt="" width="320" height="100"></div>
			<div class="item"><img src="img/resort3.jpg" alt="" width="320" height="100"></div>
			<div class="item"><img src="img/resort4.jpg" alt="" width="320" height="100"></div>
		</div>
	</div>
	<div class="pointer">
		<span class="current"></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
	<p class="controls">
		<button class="prev" disabled>prev</button>
		<button class="next">next</button>
	</p>
</div>

</div>

</div>

</p>

</div>

スライドショーのCSSコードを作成する

スライドショー部分のCSSは以下になります。最初は画像サイズを固定しています。

.gallery-box {
	width: 320px;
	overflow: hidden;
	margin: 0 auto;
	-webkit-transform: translateZ(0);
}
.gallery-box-inner {
	width: 1280px; /* 320px(item width) x 4(item count) */
}
.gallery-box-inner:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
}
.item {
	float: left;
	width: 320px;
	padding: 0;
	text-align: center;
	background: #fff;
	border-top: 5px solid #999;
	border-bottom: 5px solid #999;
}
.item img {
	width: 100%;
	height: auto;
}
.pointer {
	text-align: center;
}
.pointer span {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 8px;
	border: 1px solid #999;
}
.pointer span.current {
	background: #fc0;
}
.controls {
	text-align: center;
}
.controls button {
	width: 50px;
	height: 36px;
}

.gallery-box {

width: 320px;

overflow: hidden;

margin: 0 auto;

-webkit-transform: translateZ(0);

}

.gallery-box-inner {

width: 1280px; /* 320px(item width) x 4(item count) */

}

.gallery-box-inner:after {

content: '';

display: block;

clear: both;

height: 0;

}

.item {

float: left;

width: 320px;

padding: 0;

text-align: center;

background: #fff;

border-top: 5px solid #999;

border-bottom: 5px solid #999;

}

.item img {

width: 100%;

height: auto;

}

.pointer {

text-align: center;

}

.pointer span {

display: inline-block;

width: 8px;

height: 8px;

border-radius: 8px;

border: 1px solid #999;

}

.pointer span.current {

background: #fc0;

}

.controls {

text-align: center;

}

.controls button {

width: 50px;

height: 36px;

}

スライドショーのJavaScriptコードを作成する

コードは以下になります。

function slideShow(){
	var $demo = $('#photo');
	var $pointer = $demo.find('.pointer span');
	var flipsnap = Flipsnap('.gallery-box .gallery-box-inner', {distance: 320});
	flipsnap.element.addEventListener('fspointmove', function(){
			$pointer.filter('.current').removeClass('current');
			$pointer.eq(flipsnap.currentPoint).addClass('current');
	}, false);

	var $next = $demo.find(".next").click(function(){flipsnap.toNext();});
	var $prev = $demo.find(".prev").click(function(){flipsnap.toPrev();});
	flipsnap.element.addEventListener('fspointmove', function() {
		$next.attr("disabled", !flipsnap.hasNext());
		$prev.attr("disabled", !flipsnap.hasPrev());
	}, false);
};

$(function(){
	slideShow();
});

function slideShow(){

var $demo = $('#photo');

var $pointer = $demo.find('.pointer span');

var flipsnap = Flipsnap('.gallery-box .gallery-box-inner', {distance: 320});

flipsnap.element.addEventListener('fspointmove', function(){

$pointer.filter('.current').removeClass('current');

$pointer.eq(flipsnap.currentPoint).addClass('current');

}, false);

var $next = $demo.find(".next").click(function(){flipsnap.toNext();});

var $prev = $demo.find(".prev").click(function(){flipsnap.toPrev();});

flipsnap.element.addEventListener('fspointmove', function() {

$next.attr("disabled", !flipsnap.hasNext());

$prev.attr("disabled", !flipsnap.hasPrev());

}, false);

};

$(function(){

slideShow();

});

ここまでで、画像の横幅 320px のスライドショーが実装されました。
幅を固定でよい場合はこれでお終いです。

次にサイズが可変する Fluid Image に対応するようコードを追加します。

Fluid Image 対応のコードを追加する

HTML

すべての img 要素から width 属性と height 属性を削除します。

<div class="gallery-box-inner"><!-- inner element -->
	<div class="item"><img src="img/resort1.jpg" alt=""></div>
	<div class="item"><img src="img/resort2.jpg" alt=""></div>
	<div class="item"><img src="img/resort3.jpg" alt=""></div>
	<div class="item"><img src="img/resort4.jpg" alt=""></div>
</div>

</div>

CSS

inner 要素に指定した width プロパティの値を、「画像枚数 x 100%」に変更します。

.gallery-box-inner {
	width: 400%; /* 画像の枚数 x 100% */
}

.gallery-box-inner {

width: 400%; /* 画像の枚数 x 100% */

}

JavaScript

スクリーンサイズが変更されたときに、スライド時の移動量を調整するコードを追加します。

function slideShow(){
	var $win = $(window),
			$viewport = $(".gallery-box"),
			$inner = $(".gallery-box-inner"),
			$item = $(".item");
	var $demo = $('#photo');
	var $pointer = $demo.find('.pointer span');

	var flipsnap = Flipsnap($inner.get(0)); // Flipsnapを実行しインスタンスを取得
	$inner.data("fs", flipsnap);
	flipsnap.element.addEventListener('fspointmove', function(){
			$pointer.filter('.current').removeClass('current');
			$pointer.eq(flipsnap.currentPoint).addClass('current');
	}, false);

	var $next = $demo.find(".next").click(function(){flipsnap.toNext();});
	var $prev = $demo.find(".prev").click(function(){flipsnap.toPrev();});
	flipsnap.element.addEventListener('fspointmove', function() {
		$next.attr("disabled", !flipsnap.hasNext());
		$prev.attr("disabled", !flipsnap.hasPrev());
	}, false);

	// リサイズイベントでサイズを調整
	$win.bind("resize", function(){
		refresh();
	}).trigger("resize");

	function refresh(){
		$viewport.css("width", "100%");
		var w = $viewport.width();
		$item.width(w);
		var fs = $inner.data("fs");
		fs.distance = w;
		fs.refresh();
	}
}

$(function(){
	slideShow();
});

function slideShow(){

var $win = $(window),

$viewport = $(".gallery-box"),

$inner = $(".gallery-box-inner"),

$item = $(".item");

var $demo = $('#photo');

var $pointer = $demo.find('.pointer span');

var flipsnap = Flipsnap($inner.get(0)); // Flipsnapを実行しインスタンスを取得

$inner.data("fs", flipsnap);

flipsnap.element.addEventListener('fspointmove', function(){

$pointer.filter('.current').removeClass('current');

$pointer.eq(flipsnap.currentPoint).addClass('current');

}, false);

var $next = $demo.find(".next").click(function(){flipsnap.toNext();});

var $prev = $demo.find(".prev").click(function(){flipsnap.toPrev();});

flipsnap.element.addEventListener('fspointmove', function() {

$next.attr("disabled", !flipsnap.hasNext());

$prev.attr("disabled", !flipsnap.hasPrev());

}, false);

// リサイズイベントでサイズを調整

$win.bind("resize", function(){

refresh();

}).trigger("resize");

function refresh(){

$viewport.css("width", "100%");

var w = $viewport.width();

$item.width(w);

var fs = $inner.data("fs");

fs.distance = w;

fs.refresh();

}

$(function(){

slideShow();

});

以上、flipsnap.js を用いてフリック式のスライドショーを実装する手順を解説しました。固定サイズ/可変サイズどちらの画像でも簡単に実装できますので、ギャラリーサイトに是非とも活用してみたいものです。

特集記事

WordPress の基礎から応用まで

Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
jQuery Mobile を基本から覚える

スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。