Tutorial: How to make your own simple and nice Slider with jQuery

Well, this is not new and can be easily found on jQuery UI but you will have to download jQuery UI and use it as if it is a plugin. But for my case, i wanted to find out and construct an easy and nice slider for myself. Many will skip this step and use jQuery UI instead. But when it come to customization for vertical slider, it may come to a good use for developers or even designers to know how this is being made (you can look into the code of a plugin but it will definitely take more time).

The Problem

I am currently building a gallery similar to the current Slider Gallery plugin. But i wish to know how slider can be achieve easily without using the existing plugin or library (learning purpose). The gallery can have vertical or horizontal slider and customize the outlook to my personal need.

The Solution

I can use the existing jQuery plugin or study them to construct a jQuery slider easily. But plugin codes contain many DOM manipulation to construct HTML structure automatic in order to ease the job needed for developers or designers. In return, we eliminated the efficiency of the website because of the extra codes required in the plugin to do things automatically. Personally, i will prefer something simple and easy to understand for future enhancement and maintenance by myself (i believe majority developers or designers will love simple stuff to work with). Thus, i brainstorm something similar to a slider which might not have the same concept as jQuery UI (i never actually look at it) but should be around the same.

The Concept

Before we go into the actual coding, i like to write a small concept out for myself to understand this in the future. Basically, we need two things in a slider, the scroller and scroll bar. But this two things are not enough. There is a need for an outer container to place these two. Why? Because we need to align both scroll and scroll bar together. Therefore, both the scroller and scroll bar will have to be position in absolute. The most outer container will be position relative to prevent the absolute positioned containers from getting out of the constraint area. So we will have something as shown below,
illustrate
In order to move it accordingly, we will move the variable 'left' since the scroller is positioned absolute and use variable 'top' if we are moving vertically.

The Code

The code will be split to three part, HTML, CSS and jQuery. This is best to simplify the overall concept.

HTML

The HTML code is fairly simple and straight forward. We will create the three container which were mention on the concept section as shown below,

	<div id="scrollcontainer">
		<div id="scrollbar">
		</div>
		<div id="scroller">
		</div>
	</div>

i have placed the id for each container so that we can manipulate them when we come to jQuery coding. Short and clear.

CSS

In the CSS, this play a much bigger role as most of the display is done in here. For the outer container we will just need it to be set to display:relative, provide a width and align to center. For scroller and scroll bar will required more declaration.

#scrollcontainer
{
	margin: 0 auto;
	text-align: center;
	position: relative;
	width: 907px;
}
#scrollbar
{
	width: 907px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 0;
	background: transparent url('../images/scrollbar.png')  no-repeat;
}
#scroller
{
	background: transparent url('../images/scroller.png') no-repeat;
	width: 196px;
	height: 40px;
	position: absolute;
	left: 0px;
	top: 0px;
}

Basically i set my scroll bar width and height so that the image can be placed into it. Finally, the container with the scroll bar image is set to position absolute with the top and left set to '0' in order for all browser to align properly ( or else you will see IE having problem). Similarly, the scroller part was also being done in this way. Simple enough.

jQuery

As usual, this is the most complex part which you should focus more. We will need to define some variable before we attached any event handler and other operation.

	var myoffset = $('#scroller').offset();
	var myxpos = parseInt(myoffset.left); 
	var width = parseInt($('#scrollbar').css("width")) - 196;
	var action = false;

We will need to declare the above variable so that we can easily maintain them when required without manipulate the inside logic of the slider. The variables are explain below,

  • myoffset: this is the offset position of the 'scroller' container. Similarly, this object return contains 'scroller' position
  • myxpos: using 'myoffset' object, we retrieve the 'x-axis' position
  • width: this is the actual width of the scroll bar (we substract 196 because the scroller width is 196px)
  • action: this is to indicate whether the scroller was clicked and holded

One thought on “Tutorial: How to make your own simple and nice Slider with jQuery

Comments are closed.