Simple Vertical jQuery Slider

A Simple Vertical jQuery Slider. I was tasked recently with working on a site that had a very old vertical slider on the site. Looking into the code it was a mish mash of code within the header, in the actual template and in multiple external files. I spent a while following all these little trails of gold to find which was the real code that I needed.

In the end I managed to work it out but the conclusion I came to was that it would be much nicer if in future another developer who could potentially come across this would be better served by a hopefully neater version. So I give you a vertical slider in this post.

Now I know their are thousands of slider plugins that are far better than what I have done and the options available in these plugins alone mean that you should always consider those first before using what I have produced. I am only putting up an example of making something better than what it was and if ever a developer was in a similar situation where they only needed a relatively simple few lines of code, then here it is.

I digress, first lets get our HTML:

<ul class="slides">
++++++<img src="" />

So it’s a simple as can get layout of using the common ul li structure. Next the CSS:

ul.slides {}
ul.slides li {display:block;}
ul.slides li img {display:block;}

So nice and simple so far, now the jQuery aspect:

$.fn.vertSlides = function () {   
+++var verHeight;
+++var slideHeight = 0;
+++var ourslide = $(this).find('ul');

+++$(this).children('ul').find('li').each(function(){ ++++++verHeight = $(this).height(); ++++++$(this).attr('data-type-height', verHeight); ++++++slideHeight += verHeight; +++}); +++//take one slide height away so it doesnt slide too far +++slideHeight = slideHeight - verHeight;
+++//inverse the number to negative +++slideHeight = Math.abs(slideHeight) * -1
+++ourslide.css({ ++++++top: 0, ++++++position: 'absolute' +++}); +++setInterval(function(){ ++++++moveVertSlider() +++},6000);
function moveVertSlider(){ +++var topCss = parseInt(ourslide.css('top')); +++if(topCss > slideHeight){ ++++++ourslide.animate({ +++++++++'top' : (topCss-=verHeight) ++++++}); ++++++} else { +++++++++ourslide.animate({ ++++++++++++'top' : 0 +++++++++}); ++++++} +++} }

You may have noticed the line of code: $.fn.vertSlides = function () { this is to create a function that can be reused over and over within your scripts.js file. As you see above this line where I create an instance of this slider by passing in the class name of the slider via the line: $(‘.slides’).vertSlides();

That can be used as many times as you need throughout your site, obviously make sure you use different names and might even be worth using Id’s instead of classes. Speeds up jQuery performance.

So reading through you see we set the height for each li element by grabbing the height of the img. We set that as a data attribute on the li. We also then add to slideHeight, this variable will be a cumalitive total that we will use in the function to move the slider.

I’ve left some comments in the code but again to confirm, we take one of the slides height away as then we do not have the problem of the slider sliding one too many (we could just count one less or any other way but I felt this was the most simplest way).

And next we need to inverse the number of slideHeight. So we do that with:

slideHeight = Math.abs(slideHeight) * -1

Next we set the CSS to be absolute positioned and top value to Zero. And then we can run the moveVertSlider() function every 6 seconds via the setInterval.

The function simply checks the value of top that was set earlier, if that is greater than slideHeight it will add verHeight else it will reset to 0 (at the end of the slider it will slide all the way back to start and start again).

So while all this might not very well be rocket science, it’s something that I quickly threw together and served it’s purpose well. If another developer were to work on the site and particularly the slider, I believe this would be much nicer and easier to work with.

Well I hope I have given some interesting insight and if anything you disagree with or wish to add to, please comment below!

Random Posts