The easy Slider plug-in of jQuery
In this tutorial, we will discuss about implementing 'easySlider' plug in of jQuery
In this tutorial, we will discuss about implementing 'easySlider' plug in of jQuery
The easy Slider plug-in of jQuery
In this tutorial, we will discuss about implementing easySlider plug in of
jQuery. 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. You can also see left image which slide down
immediately, by clicking on left arrow button.
EasySlider.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
});
});
</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
The images moves automatically from right to left :
Download Source Code
Click
here to see demo
