JavaScript PR

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

記事内に商品プロモーションを含む場合があります

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

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>

easySlider:複数画像のスライド表示のデモページ

easySlider:複数画像のスライド表示のデモ

ソース元:Easy Slider 17 Numeric Navigation jQuery Slider

Easy Slider 17 Numeric Navigation jQuery Slider

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