Breaking News
Loading...

Featured content slider for your website

Share on Google Plus



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>&raquo; 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>

If you find any problem in applying this please comment or visit us at www.bel-technology.com.



You Might Also Like

0 comments

Our Logo

Our Logo
Tech Hunters

Like us on Facebook