You may remember a post I made showing how to create a full width slider with a color changing background using jQuery & jQuery Cycle. It turned out to be a very popular post, and someone suggested that I try to figure out how a slider on another site was created and make a tutorial based on it. Well, here is that tutorial.

The slider in question is a one over at Volusion which is a eCommerce software company. Their slider uses the full width of the browser well & even works on my resolution of 1920×1080. So as suggested I decided to try and figure out how they created it. It turns out that they use a jQuery plugin/library called jQuery Tools however the version they use is quite old & it is much simpler to replicate the slider than it was when Volusion created it.

Volusion no longer use the slider that I show you how to create, so as reference here is a snap I took from back when they used it. Hopefully they don’t mind, if you are from Volusion & you do object to me using this image please send me an email using the contact form.

First off, let’s take a look at an example. You could just take a trip to Volusion’s website, but I’m sure you want to see a version I made instead. Well click the demo link below.

Okay. Now that you’ve checked out what we are going to create, let’s start off with the HTML we need.

The HTML

The HTML is actually quite simple. Here is what I used.

<div id="area">
  <div id="scroller">
    <div class="items">
      <div class="item" style="background:#1E99BF;">
        <a href="#" class="image"><img src="happy-octopus_color-1E99BF.png" alt="The Octopus Smiled With Joy!" width="900" height="300" title="The Octopus Smiled With Joy!" /></a>
      </div>
      <div class="item" style="background:#E0C128;">
        <a href="#" class="image"><img src="my-eyes_color-E0C128.png" alt="Oh God! My Eyes!" width="900" height="300" title="Oh God! My Eyes!" /></a>
      </div>
      <div class="item" style="background:#A6B823;">
        <a href="#" class="image"><img src="no-body_color-A6B823.png" alt="No Body To Go With!" width="900" height="300" title="No Body To Go With!" /></a>
      </div>
      <div class="item" style="background: url(bird-bg.png) repeat-x center 0;">
        <a href="#" class="image"><img src="pole-dancing_color-1B1C30.png" alt="Pole Dancing Birdy Style!" width="900" height="300" title="Pole Dancing Birdy Style!" /></a>
      </div>
    </div>
  </div>
  <div class="navi"></div>
</div>

Okay. So I lied, it isn’t that simple. Let’s go through it a bit at a time. First off we have an element I’ve called #area this is just a container. You can keep it, change it, removed it, whatever works for your situation.

Next up is an important element. #scroller is the element we will hook the jQuery into and so is extremely important, it’s also the element we will apply some essential CSS too. We then move onto .items. This is the element jQuery Tools will use to find your items. Again it is essential, and although it’s class name can be changed, I’d recommend keeping it as items for simplicity.

Finally we have .item this is the element that is recognized by the jQuery Tools scroller as a page. So if you have multiple images/text etcetera inside an .item they will also move when next/prev is triggered. This also allows you to make carousels but that is outside of the scope of this tutorial.

Now you may notice some hard coded styling. Normally that is a bad idea, but in this case I think it’s acceptable. All we are doing is adding our images and hard coding via inline style our background colors. You may also notice that the last item has a repeating background. That is the great thing about this technique, you don’t have to just use colors. Just remember your background must repeat perfectly so that it will scale for users with large monitor resolutions.

Nearly forgot. The .navi element is for the scroller to automagically add in it’s navigation pips. The CSS to create it is available on the demo page by viewing the source.

Now, onto the CSS.

The CSS

I’m only going to show the essential code here. If you want to see the rest, view the demo & view the source code.

#scroller {
	position:relative;
	overflow:hidden;
	height: 300px;
	width: 100%;
	margin: 100px 0 0 0;
}
#scroller .items {
	position:absolute;
	height:20000em;
	width: 100%;
}
#scroller .items .item a.image {
	display: block;
	width: 900px;
	height: 300px;
	margin: 0 auto;
	border: 0; /*Thanks to Rodboc for pointing this out...*/
}

So. Most, if not all, of this is essential and the whole thing has a chance not to work if you miss it out. Basically though we are setting our widths & heights, as well as overflow to stop spillage. We also set a ridiculous height for our .items element so it can contain all our .items without any problems. We also set our hyperlinks to be block elements so we can center them, if we don’t do this the margin centering will not work & our slider won’t look right as the images will be left aligned.

If there is anything in the CSS you don’t understand I’m always here to help so just drop me a question in the comments & I’ll answer it as best I can.

Okay, now onto the jQuery.

The jQuery

First you need to attach jQuery & jQuery Tools to your page. You can download them from their respective websites or you can just use these next two lines of HTML in your documents head.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

Once you’ve done that we are ready to go.

$(function() {
	$("#scroller").scrollable({
			vertical: true,
			circular: true,
			speed: 1200
	}).autoscroll({
			interval: 5000
	 }).navigator();
});

Yep, it’s that simple. You can customize things as you like. The speed is how fast the animation runs & interval is the time between slides. If you want to customize things further you’d need to look at the jQuery Tools website’s scroller pages where you can see demos & all the available parameters/options.

Requested: Switching To Horizontal

To have the slides move horizontally instead of vertically is actually quite difficult due to the full width nature of the slider. First let’s take a look at a demo, be warned it is by no means perfect as it uses Javascript to update the width’s & position’s of elements in real time if the browser is resized.

First to the CSS adjustments needed.

/* root element for scrollable items */
#scroller .items {
	position:absolute;
	width:20000em;
}
#scroller .items .item {
	width: 900px;
	height: 300px;
	float: left;
}

As you can see we have changed our huge height for a huge width. This is to make sure our container can hold an extremely large amount of slides, this causes a problem though. Our slider works by using 100% width and now our width is massive. Now the size of the slides won’t update on browser resize as setting each item to 100% will make is 20000ems rather than the browser width since it becomes 100% of it’s parent element.

To fix this we are going to use some jQuery to help resize each item & reposition the slider when the browser is resized. Let’s take a look at the new jQuery:

$(function() {
	$("#scroller .item").css("width", $(document).width());
	$("#scroller").scrollable({
			circular: true,
			speed: 1200
	}).autoscroll({ interval: 5000 }).navigator();
	api = $('#scroller').data("scrollable");
	$(window).resize(function() {
		if($('#scroller .items:animated').length == 0) {
			$("#scroller .item").css("width", $(document).width());
			nleft = $(document).width() * (api.getIndex() + 1);
			$("#scroller .items").css("left", "-"+nleft+"px");
		}
	});
});

As you can see there are a few changes. I’ve highlighted the changes & we are only going to go through them. First off we make sure each of our items are the width of the browser when the DOM is loaded. Next you may notice that vertical: true is missing, you can either remove that line or set it to false.

We need to use the jQuery Tools API so we load it into a variable called, originally enough, api. Next we make a resize event which will trigger when the browser is resized. The function is actually pretty simple.

First we check to see if the slider is currently being animated, if it is we don’t want to do anything as it causes weirdness to happen. If it isn’t being animated we change the sizes of each item to the new browser width. Now we need to reposition the slider (.items) since resizing the browser has pushed it out of position, so we take the browser width & multiply it by the index of the current slide plus one, we add one since the slide index is counted from zero rather than one. Finally we set the left position of the .items container to the new left position we’ve calculated.

Horizontal Scrolling Fix

A small bug was pointed out by Gavrisimo in the comments. The problem is basically that if you resize the browser window while the slider is being animated you will have a problem with the width & position of the slider being incorrect. This is because the slider will not resize itself while it is animated to stop some very strange problems that occur. While it is not ideal if you want to use this style of slider here is a fix Gavrisimo kindly provided. It should be placed between lines 14 and 15 in the code above.

api.onSeek(function(event){
    $("#scroller .item").css("width", $(document).width());
    nleft = $(document).width() * (api.getIndex() + 1);
    $("#scroller .items").css("left", "-"+nleft+"px");
});

The horizontal version of this slider is still flawed even with these fixes. If you want to use it, it is best to have the speed low & interval quite high. The speed being low makes the slider quicker giving less time for the user to resize their browser during the sliders animation.

That’s it. I hope this has been helpful. As always I try my best to preempt any questions you may have, but if you have any questions at all feel free to ask them in the comments & I’ll try my best to answer them.