easySlider.jsを使って簡単に複数画像のスライド表示を導入する方法｜DAD UNION

easySlider1.7.jsを使って簡単に複数画像のスライド表示を導入する方法をご紹介します。
複数画像を「Prev・Next」「1・2・3…」リンククリックでスライドできます。

Contents

easySlider1.7.jsを使って簡単に複数画像のスライド表示を導入するJavaScriptの記述
複数画像のスライド表示を導入するCSSの記述
easySlider1.7.jsを使って簡単に複数画像のスライド表示を導入するHTMLの記述
easySlider：複数画像のスライド表示のデモページ
ソース元：Easy Slider 17 Numeric Navigation jQuery Slider

easySlider1.7.jsを使って簡単に複数画像のスライド表示を導入するJavaScriptの記述

※jquery.min.js、easySlider1.7.jsファイルを読み込みます。「Prev・Next」リンククリックでスライドするエリア（#slider）、「1・2・3…」リンククリックでスライドするエリア（#slider2）を用意しました。$(スライドするエリア).easySlider({オプション})で設定します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){	
	$("#slider").easySlider({
	auto: true,
	continuous: true,
	nextId: "slider1next",
	prevId: "slider1prev",
	});
	$("#slider2").easySlider({ 
	numeric: true
	});
});	
</script>

複数画像のスライド表示を導入するCSSの記述

※「Prev・Next」リンククリックでスライドするエリア（#slider）、「1・2・3…」リンククリックでスライドするエリア（#slider2）のCSS記述です。必要に応じて変更して下さい。

<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:700px;
	margin:0 auto;
}

/* slider */	
#slider ul, #slider li,
#slider2 ul, #slider2 li{
	margin:0;
	padding:0;
	list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{ 
	width:696px;
	height:241px;
	overflow:hidden; 
}	
#prevBtn, #nextBtn,
#slider1next, #slider1prev{ 
	display:block;
	z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{  
	display:block;
	text-align:left;
	color:#333333;
	text-decoration:none;
	padding:5px 0 5px 0;
}
#prevBtn a:hover, #nextBtn a:hover,
#slider1next a:hover, #slider1prev a:hover{
	text-decoration:underline;
}
#nextBtn a, #slider1next a{ 
}	

/* numeric controls */	
ol#controls{
	margin:1em 0;
	padding:0;
	height:28px;	
}
ol#controls li{
	margin:0 10px 0 0; 
	padding:0;
	float:left;
	list-style:none;
	height:28px;
	line-height:28px;
}
ol#controls li a{
	float:left;
	height:28px;
	line-height:28px;
	border:1px solid #ccc;
	background:#999999;
	color:#ffffff;
	padding:0 10px;
	text-decoration:none;
}
ol#controls li.current a{
	background:#ffffff;
	color:#000000;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
-->
</style>

easySlider1.7.jsを使って簡単に複数画像のスライド表示を導入するHTMLの記述

※「Prev・Next」リンククリックでスライドするエリア（id=”slider”）、「1・2・3…」リンククリックでスライドするエリア（id=”slider2″）の2パターンを用意しました。必要に応じて変更して下さい。

<div id="idWrap">
<h1>3つの画像を「Prev・Next」「1・2・3…」の2パターンでスライド表示させます。</h1>
<div align="center">
	<div id="slider">
	<ul>
        <li><img src="i01.jpg" alt="" /></li>
        <li><img src="i02.jpg" alt="" /></li>
        <li><img src="i03.jpg" alt="" /></li>
	</ul>
	</div>
<br>
<br>
	<div id="slider2">
	<ul>
        <li><img src="i01.jpg" alt="" /></li>
        <li><img src="i02.jpg" alt="" /></li>
        <li><img src="i03.jpg" alt="" /></li>
	</ul>
	</div>
</div>

</div>