ヘッダーで、jquery.jsと後述のeasySlider1.7.jsを読み込んでいます。
CSS若干見た目変更してます。
横幅、スライドする間隔、スピードは調整可能。
ナンバーナビをクリックすると自動スライドは停止します。
本家サイト＞＞Easy Slider 1.7 - Numeric Navigation jQuery Slider | Css Globe
JSを読み込みます
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easySlider1.7.js"></script>
HTMl
<div class="mod_slide"> <div id="slider"> <ul> <li><a href="https://codingmania.net/"><img src="images/01.jpg" alt="上高地の写真1" /></a></li> <li><a href="https://codingmania.net/"><img src="images/02.jpg" alt="上高地の写真2" /></a></li> <li><a href="https://codingmania.net/"><img src="images/03.jpg" alt="上高地の写真3" /></a></li> <li><a href="https://codingmania.net/"><img src="images/04.jpg" alt="上高地の写真4" /></a></li> <li><a href="https://codingmania.net/"><img src="images/05.jpg" alt="上高地の写真5" /></a></li> </ul> </div> <!--mod_slide_end--></div>
▼HTMLソース[自動エンドレスループ]
<div id="slider2"> <ul> <li><a href="https://codingmania.net/"><img src="images/01.jpg" alt="上高地の写真1" /></a></li> <li><a href="https://codingmania.net/"><img src="images/02.jpg" alt="上高地の写真2" /></a></li> <li><a href="https://codingmania.net/"><img src="images/03.jpg" alt="上高地の写真3" /></a></li> <li><a href="https://codingmania.net/"><img src="images/04.jpg" alt="上高地の写真4" /></a></li> <li><a href="https://codingmania.net/"><img src="images/05.jpg" alt="上高地の写真5" /></a></li> </ul> </div>
CSS
.mod_slide{/* numeric controlsの位置指定の為 */
position:relative;
width:696px;
}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider li,
#slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:696px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:696px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}
/* numeric controls */
ol#controls{
position:absolute;
top:0px;
right:0px;
margin:5px 0 0 0;
padding:0;
height:20px;
}
ol#controls li{
margin:0 5px 0 0;
padding:0;
float:left;
list-style:none;
height:20px;
line-height:20px;
}
ol#controls li a{
float:left;
height:20px;
line-height:20px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 6px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}