サムネクリックで画像を切り替えるレスポンシブのスライダー

Webデザイン

サムネイルをクリックして画像を切り替えるタイプのレスポンシブに対応したスライダーです。

デモページはこちら

ソースコード

HTML

<div id="responsive-slider">
	<div id="slide">
		<img src="images/img1.png" alt="">
	</div>
	<ul id="thumbnail">
		<li><a href="images/img1.png"><img src="images/img1_thum.png" alt=""></a></li>
		<li><a href="images/img2.png"><img src="images/img2_thum.png" alt=""></a></li>
		<li><a href="images/img3.png"><img src="images/img3_thum.png" alt=""></a></li>
		<li><a href="images/img4.png"><img src="images/img4_thum.png" alt=""></a></li>
		<li><a href="images/img5.png"><img src="images/img5_thum.png" alt=""></a></li>
	</ul>
</div>

CSS

img {
	width: 100%;
	height: auto;
	vertical-align: middle;
}
#responsive-slider {
	margin: 0 auto;
}
#slide img {
	position: absolute;
}
#thumbnail {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	list-style: none;
}
#thumbnail li {
	width: 50px;
}

JavaScript

$(function(){
	
	//高さの設定
	$('#slide').height($('#slide img').height());
	$(window).resize(function(){
		$('#slide').height($('#slide img').height());
	});
	
	//サムネイルをクリックしたときの処理
	$('#thumbnail a').click(function(){
		$('#slide img').before('<img src="'+$(this).attr('href')+'" alt="">');
		$('#slide img:last').fadeOut('fast', function(){
			$(this).remove();
		});
		return false;
	}).each(function(){
		//画像のプリロード
		$("<img>").attr("src", $(this).attr('href'));
	});
	
});

簡単な説明

HTMLとCSSでは特別なことはしていないので主にJavaScriptの部分で何をしているのかを説明します。

#slideに高さを与える

まずはJavaScriptのこの部分。

//高さの設定
$('#slide').height($('#slide img').height());
$(window).resize(function(){
	$('#slide').height($('#slide img').height());
});

ここで#slideに高さを与えています。
というのも#slide imgをposition: absolute;にしているので、このままだとあとに続く要素が見えなくなってしまうから（なぜposition: absolute;はのちに説明）。
そこでheight()を使ってdiv#slide内にあるimg要素の高さを取得し、さらにheight()を使って#slideに高さを与えています。

$('#slide').height($('#slide img').height());

これであとに続く要素がメイン画像の下に表示ようになります。
ですが、これだけだとウィンドウサイズが変わったときに対応できません。
そこで、ウィンドウサイズが変わったら同じ処理を行って#slideの高さを設定しなおします。

$(window).resize(function(){
	$('#slide').height($('#slide img').height());
});

これでウィンドウサイズが変わっても画像の真下にサムネイルが表示されるようになります。

メイン画像の切り替えの処理

次はJavaScriptのこの部分。

//サムネイルをクリックしたときの処理
$('#thumbnail a').click(function(){
	$('#slide img').before('<img src="'+$(this).attr('href')+'" alt="">');
	$('#slide img:last').fadeOut('fast', function(){
		$(this).remove();
	});
	return false;
}).each(function(){
	//画像のプリロード
	$("<img>").attr("src", $(this).attr('href'));
});

ここでは.click()と.each()をメソッドチェーンで繋いでいます。
サムネイルをクリックしたときの処理は.click()のほうなのでそちらの説明です。
まずはこの部分。

$('#slide img').before('<img src="'+$(this).attr('href')+'" alt="">');

before()を使って現在表示されているimg要素の前にもうひとつのimg要素を挿入しています。
挿入するimg要素のsrc属性は、クリックしたサムネイルのa要素のhref属性から取得して設定します。
なので、HTMLのa要素のhref属性は以下の例のように切り替えたい画像のsrcにしておきます。

<li><a href="images/img2.png"><img src="images/img2_thum.png" alt=""></a></li>

これでdiv#slide内のimg要素がふたつになりましたが、#slide imgがposition: absolute;となっているので挿入されたimg要素はもともと表示されていたメイン画像の後ろに重なります。
さて、それでは次の処理です。

$('#slide img:last').fadeOut('fast', function(){
	$(this).remove();
});

ここではふたつあるimg要素の手前側、つまりもともとあったメイン画像をfadeOut()を使ってフェードアウトさせ、最後にremove()を使ってimg要素を完全に削除しています。
するともともとあったメイン画像が消え、後ろにある新しく挿入したimg要素がメイン画像として現れます。
というわけで#slide imgをposition: absolute;にしていたのはこのアニメーションのための設定だったのでした。
最後にreturn false;と記述してa要素のリンクを無効にしています。
これでサムネイルをクリックしたときのメイン画像の切り替えができます。

メイン画像のプリロード

最後に残った.each()の部分の解説。

//サムネイルをクリックしたときの処理
$('#thumbnail a').click(function(){
	//中略
}).each(function(){
	//画像のプリロード
	$("<img>").attr("src", $(this).attr('href'));
});

ここでメイン画像のプリロードをしています。
サムネイルのa要素のhref属性がメイン画像のsrcになっていることを利用し、.each()を使って#thumbnail a要素をを１つずつ取り出してそのhref属性を取得、読み込む画像のsrcに設定しています。

おわりに

このサンプルではメイン画像やサムネイルはただ並べてあるだけです。
HTMLやCSSをいじればもっとそれらしいスライダーになると思うので、制作しているWebサイトに合わせて変更してみてください。
それでは。

コメント

ホーム
トップ