Custom Search


jQuery Image Slider with Code and Tutorial

Using a Slide show in your website or blog has become a fashion now a days. The reason behind that it makes your website more attractive and eye catchy, u can show the best content or your best products using an image slide show. This was traditionally done using an flash, but due to platform dependence now a days this is done by using jQuery image slider. The benifits of using an jquery content slider is that, it is very fast and it saves space. And the major benifit is that it works on all platforms even on apple products, where flash fails to load.

Their are many jquery content sliders available in market, most of them are paid. But here we have an attractive free jquery image slider for you.

Today I will tell you how to design a featured image slider for your website or content slider wordpress using the jQuery UI library.

Let’s start with it..

 

Add JavaScript Files

Step 1: Add jQuery and jQuery UI libraries to the header of your page, If your page already have these files included in header, then skip this step. For this jQuery Image Slider  we are using jQuery UI version 1.5.3.  Add Below code in <head>  . . . code . . . </head>

<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>

 

The Image Slider Structure

Step 2 : Now create a div where you want to display your image slider. Copy the below code of Slider in that div.

<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>Feel The Nature Within</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>Beautiful Natural Exposure Photographs</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>Feel the Essence of Flowers</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>Create 3D Photograph in Photoshop</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="#" >Feel The Nature Within</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="#" >Beautiful Natural 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="#" >Feel the Essence of Flowers</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 3D 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>

The CSS Styles

Step 3:  Now here is the css for image slider CSS part, You can make suitable changes to CSS as required.

#featured{
	width:400px;
	padding-right:250px;
	position:relative;
	border:5px solid #ccc;
	height:250px;
	background:#fff;
}
#featured ul.ui-tabs-nav{
	position:absolute;
	top:0; left:400px;
	list-style:none;
	padding:0; margin:0;
	width:250px;
}
#featured ul.ui-tabs-nav li{
	padding:1px 0; padding-left:13px;
	font-size:12px;
	color:#666;
}
#featured ul.ui-tabs-nav li img{
	float:left; margin:2px 5px;
	background:#fff;
	padding:2px;
	border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
	font-size:11px; font-family:Verdana;
	line-height:18px;
}
#featured li.ui-tabs-nav-item a{
	display:block;
	height:60px;
	color:#333;  background:#fff;
	line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
	background:#f2f2f2;
}
#featured li.ui-tabs-selected{
	background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
	background:#ccc;
}
#featured .ui-tabs-panel{
	width:400px; height:250px;
	background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
	position:absolute;
	top:180px; left:0;
	height:70px;
	background: url('images/transparent-bg.png');
}
#featured .info h2{
	font-size:18px; font-family:Georgia, serif;
	color:#fff; padding:5px; margin:0;
	overflow:hidden;
}
#featured .info p{
	margin:0 5px;
	font-family:Verdana; font-size:11px;
	line-height:15px; color:#f0f0f0;
}
#featured .info a{
	text-decoration:none;
	color:#fff;
}
#featured .info a:hover{
	text-decoration:underline;
}
#featured .ui-tabs-hide{
	display:none;
}

The JavaScript Code

Step 4:  Add the JavaScript code, that’ll make our featured image slider work. we are using rotating tabs feature of jQuery UI library that makes the content panels rotate automatically after given time interval.

$(document).ready(function(){
    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});

View Active Demo or Download Source Code 

Be Sociable, Share!


I am a web developer and Blogger, i love to blog on technology, trends and social networks

One Response to “jQuery Image Slider with Code and Tutorial”

  1. Jimmy Rubins says:

    A round of applause for your blog.Thanks Again. Keep writing.

Leave a Reply

Proudly Powered by Net Soft Lab.