The easy slider plug-in implementing with numeric boxes

Home Tutorial Jquery The easy slider plug-in implementing with numeric boxes

The easy slider plug-in implementing with numeric boxes
Posted on: July 31, 2010 at 12:00 AM

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 */

OUTPUT

Images Slides from right to left, also changes the boxes highlighting :

Download Source Code

Click here to see demo

Related Tags for The easy slider plug-in implementing with numeric boxes :

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics