Intoduction :-
Hii Friends...
Today I explain How To make jQuery image slider with three panels and 3D look,
If you are a web designer or developer you are already aware of how to work jQuery
and CSS. CSS3 and jQuery have smart changes in web development. you Want to animate images or texts then you can easily with the help of Jquery and css3. For this I use animated hover effects,elastic effects, buttons with built-in progress bars,light boxes, image gallery effects, text effects and zoom-in effects.
Demo :-
Example :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome On DotNetModules</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300|Prata'
rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/modernizr.custom.26887.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/noscript.css" />
</noscript>
</head>
<body>
<div class="container">
<div class="main">
<div class="fs-slider" id="fs-slider">
<figure>
<img src="images/1.jpg" alt="image01" />
<figcaption>
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</figcaption>
</figure>
<figure>
<img src="images/2.jpg" alt="image02" />
<figcaption>
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</figcaption>
</figure>
<figure>
<img src="images/3.jpg" alt="image03" />
<figcaption>
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</figcaption>
</figure>
<figure>
<img src="images/4.jpg" alt="image04" />
<figcaption>
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</figcaption>
</figure>
<figure>
<img src="images/5.jpg" alt="image05" />
<figcaption>
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</figcaption>
</figure>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgslider.js"></script>
<script type="text/javascript">
$(function () {
$('#fs-slider').imgslider();
});
</script>
</body>
</html>
Dear friends if you need this code. I will provide you Zip. Put your EmailId in comment box.
Hii Friends...
Today I explain How To make jQuery image slider with three panels and 3D look,
If you are a web designer or developer you are already aware of how to work jQuery
and CSS. CSS3 and jQuery have smart changes in web development. you Want to animate images or texts then you can easily with the help of Jquery and css3. For this I use animated hover effects,elastic effects, buttons with built-in progress bars,light boxes, image gallery effects, text effects and zoom-in effects.
Demo :-
Example :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome On DotNetModules</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300|Prata'
rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/modernizr.custom.26887.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/noscript.css" />
</noscript>
</head>
<body>
<div class="container">
<div class="main">
<div class="fs-slider" id="fs-slider">
<figure>
<img src="images/1.jpg" alt="image01" />
<figcaption>
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</figcaption>
</figure>
<figure>
<img src="images/2.jpg" alt="image02" />
<figcaption>
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</figcaption>
</figure>
<figure>
<img src="images/3.jpg" alt="image03" />
<figcaption>
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</figcaption>
</figure>
<figure>
<img src="images/4.jpg" alt="image04" />
<figcaption>
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</figcaption>
</figure>
<figure>
<img src="images/5.jpg" alt="image05" />
<figcaption>
<h3>Lorem Ipsum</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</figcaption>
</figure>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgslider.js"></script>
<script type="text/javascript">
$(function () {
$('#fs-slider').imgslider();
});
</script>
</body>
</html>
Dear friends if you need this code. I will provide you Zip. Put your EmailId in comment box.
0 comments:
Post a Comment