Full Width Vertical Slider With jQuery and jQuery Tools

/ Javascript, jQuery / by Paul Robinson / 97 Comments

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.

Snap of Volusion's old full width vertical slider, used for reference.

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.

Preview of Full Width Vertical Slider Using jQuery & jQuery Tools

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.

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.

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.

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

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.

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:

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.

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.

97 Comments

Author’s gravatar

Hey Paul,

thanks, slide-wrapper is a class I wrapped the slider in, however, it only has overflow:hidden; right now.

They’re actually not stacking down, it’s actually not even showing the slide images, it’s showing the text that sits over top and a button that is assigned to each slide.

I built the entire slider into a custom post type in WordPress. Including the text, and button.

How would I have the slider hide until the js is loaded? It’s almost like it loads the slides smaller in width first, like all of them at 700px or something during the flash moment?

I dropped the file size some too, and they are web opt.

thanks for all the help man!

http://bit.ly/ql4GvV

Reply
Author’s gravatar author

Ahh, that would explain it, lol.

To be honest it looks fine for me in Chrome. The only way I know to hide it would be to set the containing element to display hidden, and then use the on before seek event to show it once loaded.

Author’s gravatar

You don’t have an example of how to do this… Do you? 😀 haha, I’m hitting google about it now, but any advice would be much appreciated!

Author’s gravatar author

I don’t, unfortunately. I’m not even sure it would work. You could instead just make the element hidden with CSS and add a bit of code to reveal it on DOM load. It might hide it for long enough to hide the flash.

Author’s gravatar

Hi!

I found a bug in IE7-IE8 with the border image, for fix it you need to add a property in “a.image” with the value “border: 0;”

Reply
Author’s gravatar author

Hi,

Never noticed that one, but you are right. Thanks. I’ve added it into the CSS for the post with a little credit to you in the comment. 😉

Thanks again.

Author’s gravatar

i’m using 1800px images for slides. When i specified the width of “#scroller” and “#scroller items” horizontal scroll appear. ?f i specified those two width 100% then, images doesn’t shown. Is there a solution for full width images?

Reply
Author’s gravatar author

Hmm thats strange. Try setting your width to 1800px again but see if setting overflow to hidden will stop the scroll bars. Im not sure which element youd need to do it on though as I dont have the code in front of me, im writing this on the WP app.

Author’s gravatar

Hey,
Great slider and tutorial, thanks for sharing!
I just have one question..I’m not too familiar with js and I don’t understood how to add NEXT/PREV buttons, elements. Can you add a short description of how to do that?
Thanks so much!

Reply
Author’s gravatar author

Hi Catalin,

Thank you, and don’t worry I understand it can be confusing when you are just starting out with jQuery.

It’s not too difficult to add in the next/prev buttons. You just need to create two elements styled in a way you’d like using CSS and give them classes, you would normally use next & prev but you can use whatever you’d like. Then change the jQuery code from the tutorial to this:

If you use different classes you’d change .next & .prev to whatever you used.

Does that help? Let me know if you need any further help.

Author’s gravatar

Thanks you so much for this. Question though, I’d like to use numbers instead of the circles for navigation. Can you tell me how to do this?

Reply
Author’s gravatar author

Hi Rebecca,

I’m not 100% but I think jQuery tools has an option in the navigator plugin to do it for you. You would just change the navigator part of the code to this:

Basically adding 'indexed' : true as an option to the navigator plugin should do it.

Hope that helps.

Author’s gravatar

Hi there, thank you very much for the slider.

I was wondering if there is a way to slide in the background color or image first (vertical or horizontal) and fade in the image with delay. I’ve tried it, but i’m not that good with js.

It would be great if you have a solution for it.

Reply
Author’s gravatar author

Hi Jasper,

Not so much with jQuery Tools, but it may be possible using jQuery Cycle. Take a look at my latest tutorial on custom transitions hopefully it will explain a little more on how it might be done, just imagine the image is the background & the caption is the image.

Hopefully that will help with the basics, but let me know if you need any further help.

Author’s gravatar

Hello Everyone,

I would like to first say thank you.
I think the slide is fantastic..
But I can’t get the little bubbles on the bottom, I have a little experience coding.
could someone help..
Basically, I get the slider to work and the images change vertically, but the bubbles on the bottom don’t show..
I believe that bubbles are associated to the .navi item but after adding the code in my css file they don’t show..

Please help and thank you very much

Reply
Author’s gravatar author

Hi Paolo,

The most common problem is that the image, used by the slider, is missing. It’s normally included with the the jQuery tools package, but you can grab it here, if you need it.

If you do have the image & it’s linked in the CSS properly, let me know & I’ll see if I can help further.

Thank you for the kind word & hope that helps.

Author’s gravatar

Paul,

Thank for you response.
I was able to get it to work on my home page.
What I want to do now is modify the characteristics a little bit.
I would like to have it work like a image gallery..
Instead of the bubbles on the bottom (which look great on my homepage), I would like it to scroll vertically but with a “previous” and “next” button (which I have).
How would I do this?
This post is great.. helped me out a lot..
Paolo

Reply
Author’s gravatar author

Hi Paolo,

The jQuery Tools plugin automatically looks for any elements with the class next or prev and makes them usable as next & previous buttons. If you want to change it you can supply custom ones to the scrollable function using the keys next and prev.

To disable the bubbles just remove the navigator() function call from the jQuery code. So your jQuery might look something like:

Then just add in your elements with the class next & prev and use CSS to style how you like.

Hope that helps.

Author’s gravatar

Paul,

Thank again for all your help.
Your reply really did help me, your jquery explanation was clear and understandable.
However, I’m getting tricked with the html and css part.

Admin edit: Your code was removed by WordPress (sadly). I’ve replied to the email you sent instead.

Thanks again Paul, even if you don’t respond I’m extremely grateful.

Reply
Author’s gravatar

Hi! This slider is awesome, but I have a small problem: i want to use the navigator, but i want it to show over the images, when i make this navi class go up, it ends up behind the images on the slider. Someone can help me out on this?

Reply
Author’s gravatar author

Hi Ana,

Did you mean like in this screen I just took?

http://twitpic.com/9rdwbo/full

If your layout is similar to that of the layout I used in the demo you can just make the .navi class position: relative and then give it a negative top value. The only caveat is that it will still occupy the space it should have, because it is relative.

If you don’t want the extra gap try making the element holding the .navi element relative & making the .navi element absolute. Then position it using top & left. Using Chrome Dev tools or Firebug are invaluable in cases like these.

Hope that helps & let me know if you need any further help.

Author’s gravatar

Is there anyway to make the transitions fade instead of scroll like you have here in the Fluid Full Width Feature Slider Using jQuery Cycle?

Reply
Author’s gravatar

Or, is there any way to add prev & next to the Fluid Full Width Feature Slider Using JQuery Cycle?

Reply
Author’s gravatar author

Hi Ryan,

You can set a previous & next button on jQuery cycle by using the prev & next parameter & passing them a CSS selector pointing to elements you have made to contain the previous & next buttons.

Author’s gravatar

nice coding, and well explained. How can I get the timer to reset if you select a slide using nav?

cheers 🙂
S.

Reply
Author’s gravatar author

Hi Stephen,

That would be something that jQuery tools would have to do already. I’m not sure but one of the new demos on the jQuery tools website looks as if it is doing that automatically now without any modification. If you haven’t already checked you could see if there is a new version over on the jQuery Tools website.

Author’s gravatar

Hi!
I love this slider.
I’d like to use this slider by arrow navigation, but It doesn’t work well.
Can you help me?!

Hope your helps!

Reply
Author’s gravatar author

Hi David,

Would love to help, but you haven’t mentioned what the problem is that you are experiencing.

Author’s gravatar

Hi, can you tell me how to use fade effect ?

Reply
Author’s gravatar author

Hi Sam,

as far as I know jQuery Tools doesn’t have a fade effect. You would need to use something like jQuery Cycle instead.

Author’s gravatar

Hi thank you so much for this code! It works great, but I have some questions regarding the slider:
1. Is it possible to do the same thing to the height as with the width? For example if I want the height to stretch all the way to the bottom of the page as the width does to the side is that possible and how can I do that?
2. I cant get the next and prev buttons to work (in fact they wont even show up). I removed the navigation and tried to put in a next and prev button at the top and below the slider…

This is the code I used:

and function:

Reply
Author’s gravatar author

Peter,

I’m not sure if you could do that. The only way I know to have a background extend the full height of the browser is to either use some JavaScript based trickery like the ever famous jQuery Backstretch, or to use some CSS trickery that doesn’t always have the desired result. Unfortunately I don’t have that CSS on hand, but it normally has it’s problems anyway. I’m sure there is someone out there who has done it without JS but I can’t say I’ve found a consistent way yet.

I’m not sure about the next/prev buttons. I didn’t make jQuery Tools, I would just follow the instructions on their website the same as you, so I’m afraid I can’t help much with that. The only thing I can suggest is to look for any JS errors as that can sometimes cause strange problems.

Author’s gravatar

Paul,

I have tested this on my tablet and it works great, however when I swipe with my fingers down the slide image it transitions to the next slide instead of moving down the page as I would prefer. This makes it virtually impossible to move down the page on a small tablet if your slider takes up the entire viewable height. Is there any way to enable it so that you can only navigate the slides using designated the navigation buttons?

Reply
Author’s gravatar author

Hi Ryan,

Honestly? I’m not sure. It seems to be something the jQuery Tools library does, but I can’t see anything that says it supports touch. Sadly it seems there is nothing can be done without either hacking the library or waiting until jQuery Tools fix it (if it’s a bug) or give a way to change or disable it.

Author’s gravatar

Hi Paul, this is simply brilliant!

I’m using it in a test site, but I have a question. Is there a way to have a button that would make the slider stop and other to play it? Can I pull it off with a jquery function?

Outstanding work!
Manuel

Reply
Author’s gravatar author

Hi,

Indeed you could do that using the jQuery Tools API. Use a standard click event on the element you want to use to pause and use api.pause() & api.play() to pause & play.

Something like:

Author’s gravatar

Is it possible to adjust the height of the slider based on the image. Of course making sure that we do not go over the visible height and width of the browser window?

Reply
Author’s gravatar author

Hi,

I’m not sure if this is possible. It’s probably best to check out the jQuery Tools website as that is what is used for the slider in this tutorial.

Author’s gravatar

Thank you very very very much for this script you really save me,

Can i ask you something, i use ‘next’ an ‘prev’ button’s, but, do you know if it is possibile to go back two previous slides, i mean you have 3 slides, 0-1-2, from 0 you go in 2, and from there go back in 0 not with ‘next’ but with ‘prev’

Thanks in advance you are my hero.

Reply
Author’s gravatar

Hello Paul,

Nice Post, this wat i was looking for long time back.
Thank you very much.

Reply
Newer Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more