The easy Slider 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 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

Ads