have you ever wonder how to create a content slider for your website like this one? or this one? or even the one that we have on our frontpage?

Well, this article might help you a little bit about the concept. But just keep in mind that there are so many techniques in creating this slider. And this article just one of them. If you pay a little bit attention to the links that I gave above, those websites seem to use different tools, such as flash and javascript framework (jQuery, Mootools, etc).

Now, lets begin…

1. Prepare the contents

To do this, I will start by preparing the contents for my slider. Lets just say I have these three cool colourfull rectangles. And with css, I put them in order from left to right (horizontal order).

<div class="content red">Content 1</div>
<div class="content blue">Content 2</div>
<div class="content green">Content 3</div>


If you wonder about the css, here you go… (click here to display a complete version)

.content {
  width: 200px;
  height: 100px;
  float: left;
  margin: 10px;
  /* additional style */
  text-align: center;
  color: white;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

Of course this will give me a look something like this

2. Wrap the contents

Now I need to wrap these contents into one single <div>. Why is this important since we’ve already made those contents in line horizontally? well, simply because this <div> is the one that will be sliding from left to right or vice versa.

So in order to do this I just put this <div> around those contents above. simple! …and give it an id name: ‘slider‘.


<div class="slider">

  <div class="content red">Content 1</div>
  <div class="content blue">Content 2</div>
  <div class="content green">Content 3</div>

</div>


The trick with this <div> is that I need to specify the total length used by all contents that I want to display in the slider. So, with a simple math, I will have (200*3 + 20*3 + 10*2) which equals to 660px. a 200 is the content’s actual length; 20 is the length of left and right margin of each content combined; and 10 is each for top and bottom margin.

Also the use of position:relative is important. The slider might not work if I use position:abolute or position:inherit.

Hence, the following is my modified css. (click here for the complete one)


.slider {
  width: 660px;
  height: 120px;
  position: relative;
  left: 0px;
}

/*-- step 1 --*/

.content {
  width: 200px;
  height: 100px;
  float: left;
  margin: 10px;
  /* additional style */
  text-align: center;
  color: white;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

You probably could not tell the difference since the slider is just only focussing in the width and height. However, if you set a border surrounding the slider then you definitely can tell the difference.

Just for the sake of clarity in the example, I drew a border so it looks like this:

3. Set a frame

The next step is setting a frame for the slider. Just like frame in photography, the term 'frame' here is resposible for displaying the part of a content while the other parts are hidden.

Again I have to wrap the contents to this frame along together with the slider.


<div class="frame">

  <div class="slider">
    <div class="content red">Content 1</div>
    <div class="content blue">Content 2</div>
    <div class="content green">Content 3</div>
  </div>

</div>


The key to this frame is in the css part where I have to set the width and the length, and also… the overflow. Overflow should be set as hidden, which means the frame would hide all contents which is not within the area of its width and height.

Just for a side note, I use position:absolute in order to work with IE. If I omit this attribute, in other browsers works perfecly fine, except IE. I haven’t tried with IE8 or 9 but that’s what happened with IE7.

the following is my modified css.. (click here for the complete snippet)


.frame {
  width: 220px;
  height: 120px;
  overflow: hidden;
  position: absolute;
  border: 1px solid black;
}

/*-- step 2 --*/

.slider {
  width: 660px;
  height: 120px;
  position: relative;
  left: 0px;
}

/*-- step 1 --*/

.content {
  width: 200px;
  height: 100px;
  float: left;
  margin: 10px;
  /* additional style */
  text-align: center;
  color: white;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

Excellent, now I have the slider which is ready for some sliding.

Need screenshot? here you go…

4. Set the trigger

Now this step really needs my creativity. The term trigger means I have to make some thing to make the slider… well, sliding. Either simple links, tabs, lists, or anything that I feel like to create. But again, for the sake of simplicity, I just use simple links.

I put links to trig the slider below my frame. The links are number which related to the contents inside the slider or frame. So '1' is for 'content 1', '2' is for 'Content 2', and '3' is for 'Content 3'.

So here is my html code.


<div class="frame">
  <div class="slider">
    <div class="content red">Content 1</div>
    <div class="content blue">Content 2</div>
    <div class="content green">Content 3</div>
  </div>
</div>

<div class="trigger">
  <a href="javascript:void(0);" onclick="letSlide(1)">1</a> |
  <a href="javascript:void(0);" onclick="letSlide(2)">2</a> |
  <a href="javascript:void(0);" onclick="letSlide(3)">3</a> |
</div>


If you wondering what’s the deal with 'javascript:void(0);', it’s just a simple javscript trick so that whenever the link is clicked accordingly, nothing would happen.

Now, the thing that I need to be focus on is the onclick event. This is a javascript function so whenever the link is clicked the function is called. I’ll come back with javascript later, but for now, I want to focus on the css first.

Handling css in this step probably the most difficult part if you aren’t familiar with css. Because it is up to you where you want to place the trigger and does not have to near the frame (slider). At this point, the use of css is less important as a functionality, but as for aesthetic purpose, it does really matter.

For example, if I didn’t set any css for my trigger class and leave it bold, then the appearance would be really ugly. Don’t trust me? please, try it yourself. As of this step needs my creativity so by just doing ‘abracadabra’, I pull it off . The following is my customized css for the links to be displayed below the frame of the slider (click here for the complete snippet).


.trigger {
  text-align: center;
  width: 220px;
  padding-top: 130px;
}

/*-- step 3 --*/

.frame {
  width: 220px;
  height: 120px;
  overflow: hidden;
  position: absolute;
  border: 1px solid black;
}

/*-- step 2 --*/

.slider {
  width: 660px;
  height: 120px;
  position: relative;
  left: 0px;
}

/*-- step 1 --*/

.content {
  width: 200px;
  height: 100px;
  float: left;
  margin: 10px;
  /* additional style */
  text-align: center;
  color: white;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

Need screeshot? here you go…

5. Create The Javascript Function for The Slider

In this step I’m going to play with javascript just a little bit in order to make the slider works perfectly. If you haven’t familiar with javascript or jQuery just copy and paste the code below. Off course you have to make a small changes so it match to your slider environment.

The thing that really needs a serious attention is how far I want to slide the slider. Since javascript framework is a very cool tool, then all I need to do is just setting the position where the slider has to stop. As you can see in my snippet code below every content id has their unique 'leftside' value.

There are numbers of ways to calculate this value including you can create for this to be automatically calculating the left side. However, the easiest way to do this is just hardcoding the values. For the example I’ve been using so far, I use simple math calculation to determine the values: (n-1)*(200+20) where 200 is the length of each content, 20 is the total left+right margin. The results should be in minus sign. Hence, I’ll have -220px for content #2 and -440px for content #3.

Now, if you still think that this is too abstract then I reckon to try changing those number as you like. then you will see the difference in your browser.

Don’t forget, this javascript snippet needs to be put between your <head></head> tags.


<script type="text/javascript">
  function letSlide(contentid) {
    if(contentid == 1) var leftside = '0px';
    else if(contentid == 2) var leftside = '-220px';
    else if(contentid == 3) var leftside = '-440px';
    $('.slider').animate({
      left: leftside
    },500)
  }
</script>


6. Summon jQuery

Yes, it is the time to summon my dearest javascript framework, jQuery. Simply put, I can call it from jquery CDN server with this single line between <head></head> tag.


<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>


And guess what? once I’ve done this, then the work is done. yay!

A little note, if you wonder where to put first, the jQuery or the custom functions then the answer would be does not really matter. You can put the jQuery first or after your functions. It’s gonna work anyway since we are using function definition, not a native jQuery definition. If you know well jQuery, you’ll know what I mean.

Lets Slide….

Since my work is done, I’m going to share it to you. You may try this by clicking the links below the rectangle area. Go Banana!

If you need source code for this, you can just click here.

Compatibility

I have tested this technique in several major browsers.

No	Browser	Version	is working
1	Chrome	10.0.648.134
2	Firefox	3.6.15
3	Opera	10.54
4	Safari	5.0.2
5	IE	7

And that’s all, folks! Hope you enjoy this How-To articles…

Cheers!