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

jquery.coverscroll.jsを使って複数画像を横一列に重ねて真ん中の画像を強調スライドする方法をご紹介します。
選択した画像が真ん中に移動し、強調されます。また複数画像は左右にスライドします。

Contents

jquery.coverscroll.jsを使って複数画像を横一列に重ねて真ん中の画像を強調スライドするJavaScriptの記述
複数画像を横一列に重ねて真ん中の画像を強調スライドするCSSの記述
複数画像を横一列に重ねて真ん中の画像を強調スライドするHTMLの記述
jquery.coverscroll：複数画像を横一列に少し重ねてスライドし、真ん中画像のみ強調表示させるデモページ
ソース元：CoverScroll jQuery plugin

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の記述

※スライドエリア（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>