Home Tutorial Jquery The easy Slider plug-in of jQuery

 
 

Share on Google+Share on Google+
The easy Slider plug-in of jQuery
Posted on: July 31, 2010 at 12:00 AM
Advertisement
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

Advertisement

Related Tags for The easy Slider plug-in of jQuery :


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: July 31, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com