Web International Awards

payday loan

10

MAY 2011 0

Coding a simple slider in no time

simple slider

We've published a couple of articles on sliders in the past. We first had a tutorial on building a XML powered slider, then we released the source codes and demo for the xml slider and we finally released the latest revision as the xml slider plugin. Today we're going back to basics, as I am going to show you how to make a rather simple, lightweight slider in no time. Here's a demo of what we're building today.

HTML structure

This structure will retain and contain the actual thumbs which will be displayed as the slider's content. As you'll probably figure out, I am using the 960gs to keep the structural integrity as simple as possible.
<div id="wrapper" class="container_12">
<div id="featured-wrapper" class="grid_12 all-rounded">
<div class="arrowleft"></div>
<div id="featured-thumb" class="grid_12 alpha omega all-rounded">
<ul id="featured-thumb-list"></ul>
</div>
<div class="arrowright"></div>
<div class="clear"></div>
</div>
</div>
The wrapper is used to hold the entire contents of the page in the center of it. featured-wrapper will hold the next, previous arrows as well as the featured-thumb div that wraps the thumbnail list. featured-thumb will have overflow set to hidden so that only a couple of thumbs are shown at a time. The unordered list will be shifting left to right when users click the arrows to reveal other caricatures. Before we get there, here's the code that is used to display the thumbs. The following piece of code will be repeated inside the unordered list depending on how many thumbs we want to display.
	<li class="grid_2">
	<a class="all-rounded" href="#">
		<img class="all-rounded" src="thumb_featured.png" alt="caption title" width="120" height="150" />
		caption title
	</a></li>

Styling the slider with a sprinkle of css

#featured-wrapper { padding:0px; margin-top:35px; margin-bottom:35px; height:207px; }
#featured-wrapper .arrowleft { position:absolute; display:block; width:49px; height:61px; float:left; margin-left:-25px; margin-top:55px; z-index:100; background:url('arrow_left.png') no-repeat; }
#featured-wrapper .arrowright { position:relative; display:block; width:49px; height:61px; float:right; margin-right:-27px; margin-top:55px; z-index:100; background:url('arrow_right.png') no-repeat; }
#featured-thumb	{ position:absolute; background-color:#FFF; border:1px solid #CCC; text-align:center; z-index:50; padding:15px 0px; overflow:hidden; }
#featured-thumb-list { width:20000px; float:left; margin:0px; padding:0px; }
#featured-thumb-list li a { text-decoration:none; }
#featured-thumb-list li img { background-color:#F1F1F1; border:1px solid #CCC; margin-bottom:10px; }
I left out the code for the grid system. What this piece of css does is it sets the width and heigh of the div that wraps the slider controls and content, it positions the arrows and displays their background images (I used background images for the arrow design). It also sets the structure and overflow of the featured-thumb div that wraps the list of thumbnails. Finally, it applies some basic styles to the thumbnail placeholder and the links used for each thumbnail.

jQuery functionality

function featured_thumb(maxwidth)
{	// featured thumb functionality
	if((typeof maxwidth=='undefined')||(maxwidth==null)){maxwidth=900;}
	$('.arrowright').live('click',function(){
		if ( Math.round(parseFloat($("#featured-thumb-list").css("margin-left"),10))&lt;=-maxwidth) 		{ 			$('#featured-thumb-list').stop(); 			$('#featured-thumb-list').animate({ 			    'margin-left': '-'+maxwidth 			  }, 500, function() { 			    // Animation complete. 			  }); 		} 		else 		{ 			$('#featured-thumb-list').stop(); 			$('#featured-thumb-list').animate({ 			    'margin-left': '-=160' 			  }, 500, function() { 			    // Animation complete. 			  });	 		} 	}); 	$('.arrowleft').live('click',function(){ 		if ( Math.round(parseFloat($("#featured-thumb-list").css("margin-left"),10))&gt;=0)
		{
			$('#featured-thumb-list').stop();
			$('#featured-thumb-list').animate({
			    'margin-left': '0'
			  }, 500, function() {
			    // Animation complete.
			  });
		}
		else
		{
			$('#featured-thumb-list').stop();
			$('#featured-thumb-list').animate({
			    'margin-left': '+=160'
			  }, 500, function() {
			    // Animation complete.
			  });
		}
	});
	// end featured thumb functionality
}
 
jQuery(document).ready(function($)
{
	featured_thumb(850);
});
In the above javascript snippet we define a function which adds the required functionality to the slider. Its sole parameter is the maxwidth variable, which is the maximum width of the margin-left property which is modified to move the thumbnail inside the placeholder. So if the placeholder is 800 px in width and the maxwidth variable set to 850, the thumbs will move around in a 1650 box. There are two onclick events (lines 4 and 24) which basically trigger the same functionality that is applied in opposite directions (left and right). To move left, we add pixels to left margin. To move right, we subtract from the left margin. Because the margin-left attribute is defined as X px;, where X is a number, we parse this value into a float (to allow negative values also), then we round the number (to prevent anything bad going on) and compare the value with 0 or maxwidth depending on the direction we're headed to. If we're going left and by clicking the left arrow the margin would become greater than 0, we have reached the end of the slider and we therefor stop the animation from sliding the content even further. If you try many repeated clicks you'll this code will even perform an effect similar to a bouncing effect. Similarly, if moving the content to the right, the margin is compared to negative maxwidth (<=-maxwidth). If we reach this threshold, once again we're at the end of the thumbnails box and the animation needs to be stopped to prevent moving the thumbnails further. To conclude, I guess that in order to reduce the size of the code one can write an extra function for the onclick behavior and call it when needed instead of copy pasting it into each of the events and doing the minor customization I've done.

Published on Tuesday, May 10th, 2011 at 5:00 pm in code, css, jQuery, tutorials.

About Bogdan Pop

Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He is a web developer with awesome design skills, who enjoys writing about everyday's work and usability. He relaxes by taking photos every once in a while and by mixing french electronic music. Connect with him via Twitter.
 

There are no comments. You can be the first to post one.





Save time next time! You won't have to fill out all these fields again. Register in just a few clicks and then login.


If you do not have a username, you can register in just a few clicks.