JavaScript

jquery.coverscroll.jsを使って複数画像を横一列に重ねて真ん中の画像を強調スライドする方法

  /

今回は、複数の画像を横一列に並べて真ん中の画像を強調表示する方法をご紹介します。
jQuery.coverscroll.jsを使えば、画像が自動的にスライドし、選択した画像が中央に移動して目立つように表示されます。実際のコードとデモを交えて解説しますので、ぜひ試してみてください。

Contents

jQuery.coverscroll.jsとは

jQuery.coverscroll.jsは、複数の画像を横一列に並べ、その中で選択した画像を中央に配置して強調表示するプラグインです。このプラグインを使えば、簡単に視覚的に魅力的な画像スライドショーを作成できます。

必要なファイルの読み込みとJavaScriptの記述

まずは、jquery.min.js、jquery.coverscroll.min.jsファイルを読み込みます。
$(スライドエリア).coverscroll();で画像スライドショーを初期化し、複数画像を横一列に重ねて真ん中の画像を強調スライドします。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery.coverscroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#idCs').coverscroll();
});
</script>

CSSのスタイル設定

次に、画像スライドショーのスタイルを設定します。スライドエリア（#idCs）を用意します。

<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
	padding:15px 0 10px 0;
}
#idWrap{
	width:1000px;
	margin:0 auto;
}
#idCs{
	width:1000px;
	height:280px;
}

-->
</style>

HTMLの準備

画像を表示するためのHTMLを準備します。スライドエリア（id=”idCs”）とスライド画像を10枚用意しました。

<div id="idWrap">
<h1>10枚の画像より選択した真ん中の画像を強調表示し、スライドさせます。</h1>
<div id="idCs">
    <img src="i1.jpg" alt="" />
    <img src="i2.jpg" alt="" />
    <img src="i3.jpg" alt="" />
    <img src="i4.jpg" alt="" />
    <img src="i5.jpg" alt="" />
    <img src="i6.jpg" alt="" />
    <img src="i7.jpg" alt="" />
    <img src="i8.jpg" alt="" />
    <img src="i9.jpg" alt="" />
    <img src="i10.jpg" alt="" />
</div>
</div>

jquery.coverscroll：複数画像を横一列に少し重ねてスライドし、真ん中画像のみ強調表示させるデモページ

設定が完了したら、実際にブラウザでページを確認してみましょう。画像が横一列に並び、クリックした画像が中央に移動して強調表示されるはずです。実際のデモページもご覧いただけます。

jquery.coverscroll：複数画像を横一列に少し重ねてスライドし、真ん中画像のみ強調表示させるデモページ

ソース元：CoverScroll jQuery plugin

このプラグインのソースは以下からダウンロードできます。

CoverScroll jQuery plugin

まとめ

以上が、jQuery.coverscroll.jsを使って複数の画像を横一列に並べて中央の画像を強調表示する方法です。このプラグインを使うことで、簡単に魅力的な画像スライドショーを作成できます。手軽に実装できるので、ぜひ試してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

画像スライダー jquery.coverscroll
関連記事