How to create image slider using Jquery and CSS
In this article, I have design the image slider
using jQuery and css. We can use this slider in our web site or blogs.
Source Code:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="imagesilder.aspx.cs" Inherits="imagesilder"
%>
<!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 runat="server">
<title>Image
silder with css and jquery</title>
<style type="text/css">
body
{
background:
transparent;
font:
15px/2 'Adobe Caslon
Pro' , Georgia,
Serif;
margin:
0;
padding:
0;
}
a
{
outline:
0 none;
}
#pagewrap
{
margin:
10px auto;
padding:
0;
position:
relative;
height:
400px;
width:
640px;
}
#slidewrap
{
position:
absolute;
}
#slider
{
border-color:
#c0c0c0;
border-radius:
5px 5px 5px 5px;
border-style:
solid;
border-width:
10px 10px 30px;
box-shadow:
0 0 3px #2F2F2F;
height:
280px;
margin:
10px;
position:
relative;
width:
600px;
}
#slider
images
{
position:
absolute;
top:
0px;
left:
0px;
display:
none;
}
.nivoSlider
{
position:
relative;
}
.nivoSlider
images
{
position:
absolute;
top:
0px;
left:
0px;
}
.nivoSlider
a.nivo-imageLink
{
position:
absolute;
top:
0px;
left:
0px;
width:
100%;
height:
100%;
border:
0;
padding:
0;
margin:
0;
z-index:
6;
display:
none;
}
.nivo-slice
{
display:
block;
position:
absolute;
z-index:
5;
height:
100%;
}
.nivo-box
{
display:
block;
position:
absolute;
z-index:
5;
}
.nivo-directionNav
{
display:
none !important;
}
.nivo-html-caption
{
display:
none;
}
.nivo-caption
{
position:
absolute;
right:
20px;
text-align:
center;
top:
130px;
width:
192px;
z-index:
60;
}
.nivo-caption
p
{
margin:
0;
}
.nivo-caption .title
{
font-style:
italic;
}
.nivo-controlNav
{
bottom:
-23px;
display:
block;
height:
15px;
left:
204px;
position:
absolute;
text-align:
center;
width:
192px;
z-index:
51;
opacity:
0.6;
}
.nivo-controlNav
a
{
background:
transparent url(http://project.dimpost.com/image-slider/images/button.png)
no-repeat center
center;
display:
inline-block;
height:
14px;
width:
14px;
text-indent:
-9999px;
cursor:
pointer;
}
.nivo-controlNav
.active
{
background:
transparent url(http://project.dimpost.com/image-slider/images/button_active.png);
}
</style>
<script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js"
type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js"
type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function
() { $('#slider').nivoSlider(); }); </script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="pagewrap">
<div id="slidewrap">
<div id="slider">
<br />
<a href="" target="_blank">
<br />
<img alt="" src="livewithfun/livewithfun (1).jpg" title="#caption1"
/>
</a>
<br />
<a href="http://www.livewithfun.in/" target="_blank">
<br />
'
<img alt="" src="livewithfun/livewithfun (3).jpg" title="#caption1"
/></a>
<a href="http://www.livewithfun.in/" target="_blank">
<br />
<img alt="" src="livewithfun/livewithfun (3).jpg" title="#caption1"
/></a><br />
<a href="http://www.livewithfun.in/" target="_blank">
<br />
<img alt="" src="livewithfun/livewithfun (2).jpg" title="#caption1"
/></a><br />
<a href="http://www.livewithfun.in/" target="_blank">
<br />
'
<img alt="" src="livewithfun/livewithfun (1).jpg" title="#caption1"
/></a>
<a href="http://www.livewithfun.in/" target="_blank"></a>
<br />
</div>
<br />
</div>
<br />
</div>
</div>
</form>
</body>
</html>
Out-Put:-
How to create image slider using Jquery and CSS
Reviewed by NEERAJ SRIVASTAVA
on
10:12:00 AM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
10:12:00 AM
Rating:
No comments: