The easy slider plug-in implementing with numeric boxes

In this tutorial, we will discuss about implementing 'easySlider' plug in of jQuery with numeric boxes.

In this tutorial, we will discuss about implementing 'easySlider' plug in of jQuery with numeric boxes.

The easy slider plug-in implementing with numeric boxes

In this tutorial, we will discuss about implementing 'easySlider' plug in of jQuery with numeric boxes.In this example, easySlider plug in used to develop automatic slide show of images which moves from right to left. This effect is implemented using easySlider function of jQuery. The numeric boxes highlighted according to the sequence of the images.

EasySlider2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Easy Slider jQuery Plugin Demo</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />

</head>
<body>

<div id="container">

<div id="header">
<h1>Example of Easy Slider Plugin of jQuery</h1>
</div>

<div id="slider">

<ul>
<li><img src="images/jquery1.jpeg" alt="Css Template Preview" /></li>
<li><img src="images/jquery2.jpeg" alt="Css Template Preview" /></li>
<li><img src="images/jquery3.jpeg" alt="Css Template Preview" /></li>
<li><img src="images/jquery4.jpeg" alt="Css Template Preview" /></li>
<li><img src="images/jquery5.jpeg" alt="Css Template Preview" /></li>
</ul>
</div></div>
</body>
</html>

screen.css

/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */

#container{
margin:0 auto;
position:relative;
text-align:left;
width:696px;
background:#fff;
margin-bottom:2em;
}

/* Easy Slider */

#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:260px;
height:260px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:260px;
}
#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{
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:#DAF3F8;
color:#555;
padding:0 10px;
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;}

/* // Easy Slider */