Featured content slider for your website
Featured Content Slider makes a
slideshow out of arbitrary content on your page, so users can manually select a
content to see or have them rotated automatically. Using an auto-playing content slider is the one
of techniques to show your featured content. It saves you space and makes for a
better user experience.
Let’s start with it..
Add JavaScript Files
First of all, grab the jQuery
and jQuery UI libraries, if you have already
include them in your page header.
1. "http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"
2. "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
></script>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"
></script>
Complete
code for Featured content slider:-
<head >
<meta
http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Featured Content
Slider Using jQuery - Web Developer Plus
Demos</title>
<link
rel="stylesheet" type="text/css" href="style.css"
/>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
></script>
<script
type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"
></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#featured >
ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate",
5000, true);
});
</script>
</head>
<body>
<h3>» Featured
Content Slider Using jQuery</h3>
<div id="featured" >
<ul class="ui-tabs-nav">
<li
class="ui-tabs-nav-item ui-tabs-selected"
id="nav-fragment-1"><a href="#fragment-1"><img
src="images/image1-small.jpg" alt="" /><span></span></a></li>
<li
class="ui-tabs-nav-item" id="nav-fragment-2"><a
href="#fragment-2"><img src="images/image2-small.jpg"
alt="" /><span></span></a></li>
<li
class="ui-tabs-nav-item" id="nav-fragment-3"><a
href="#fragment-3"><img src="images/image3-small.jpg"
alt="" /><span></span></a></li>
<li
class="ui-tabs-nav-item" id="nav-fragment-4"><a
href="#fragment-4"><img src="images/image4-small.jpg"
alt="" /><span></span></a></li>
</ul>
<!--
First Content -->
<div
id="fragment-1" class="ui-tabs-panel"
style="">
<img
src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a
href="#" >15+ Excellent High Speed
Photographs</a></h2>
<p>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum
lacus. Pellentesque ut diam....<a href="#" >read
more</a></p>
</div>
</div>
<!--
Second Content -->
<div
id="fragment-2" class="ui-tabs-panel ui-tabs-hide"
style="">
<img
src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a
href="#" >20 Beautiful Long Exposure
Photographs</a></h2>
<p>Vestibulum
leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem,
sagittis non egestas id, suscipit....<a href="#" >read
more</a></p>
</div>
</div>
<!--
Third Content -->
<div
id="fragment-3" class="ui-tabs-panel ui-tabs-hide"
style="">
<img
src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a
href="#" >35 Amazing Logo Designs</a></h2>
<p>liquam
erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis
sollicitudin ornare....<a href="#" >read
more</a></p>
</div>
</div>
<!--
Fourth Content -->
<div
id="fragment-4" class="ui-tabs-panel ui-tabs-hide"
style="">
<img
src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a
href="#" >Create a Vintage Photograph in
Photoshop</a></h2>
<p>Quisque
sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium
luctus, leo augue sodales....<a href="#" >read more</a></p>
</div>
</div>
</div>
</div>
</body>
By this code you will get Photo album like slider. Above
code is functional.
If you find any problem in applying this please comment or visit us at www.bel-technology.com.
0 comments