KierenHughes.com General, Coding, The Web etc.

Simple jQuery Slider

Hey guys!

Since my last post I've began work as a website developer at Daydream Designs. Really enjoying it!

Recently I was developing a website that needed a simple jQuery slider (fade in and out effect). So I just thought I'd share some code that could be useful to anyone needing to create a simple jQuery slider that isn't too difficult to edit!

            var timeinterval = 0;
	    var timers = new Array();

	    $(document).ready(function() {
		timedCount();
	    });

	    function timedCount(){

                if(timeinterval>0){
		     timeinterval = 0;
		     clearTimeout(restartMethod);
		}

               for(i=2; i<6; i++){
                    timeinterval = timeinterval + 5000;
                    timers[i] = setTimeout("$('li#slider" + i + "').fadeIn(1000);", timeinterval);
                }
                timeinterval = timeinterval + 5000;
		a=setTimeout("fadeAndReset(); clearTimeout(a);",timeinterval);

		restartMethod = setTimeout("timedCount()", timeinterval);
	}

	function fadeAndReset(){
             for(i=2; i<5; i++){
                  $('li#slider' + i).fadeOut(0);
		  clearTimeout(timers[i]);
	     }
	     $('li#slider5').fadeOut(1000);
             clearTimeout(timers[5]);
	}

So to explain how to use the above code.

The above code will currently only allow the use of 5 slider images on any given webpage, in order to change the number of sliders, you must alter the following lines:

• Line 15: Change i is less than 6 to i is less than whatever number of sliders you have plus 1 (i.e. i is less than 6 is for 5 slider images)
• Line 26: Change i is less than 5 to i is less than whatever number of sliders you have (i.e. i is less than 5 is for 5 slider images)
• Line 30: li#slider5 should be changed to li#slider followed by the number of the last image (i.e. if there were 10 images you would change this to li#slider10).
• Line 31: timers[5] should be changed to timers[whatever number of sliders there are]

In order to change the speed of the slider (i.e. how quickly (or slowly) the images change):

• Line 16 and 19: Change 5000 to whatever number of milliseconds you want the slider to change at (e.g. 5000 is 5 seconds, 10000 is 10 seconds).

The code for the actual slider within the html should be as follows:

	<li id="slider1"><img src="image1.jpg" alt="" /></li>
	<li id="slider2"><img src="image2.jpg" alt="" /></li>
	<li id="slider3"><img src="image3.jpg" alt="" /></li>
	<li id="slider4"><img src="image4.jpg" alt="" /></li>
	<li id="slider5"><img src="image5.jpg" alt="" /></li>

Within the css for each of the list items above, all but 'slider1' should have display set to "none", e.g.

li#slider2{
     display: none;
}

All of the images should be the same width/height too. Obviously, add more list items if more slider images are required. Note that it is important that the slider ids are in the format sliderslidernumber (e.g. slider1, slider2 etc.).

I know it's not the easiest code to use (as it's not a plugin), however if you follow the steps above, it should work fine!

Remember to insert the javascript code within the head of the html page within the usual javascript 'script' tags. And also remember to link to jQuery using:

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

Hope that's of some use to someone! If you have any problems, leave a comment below and I'll see what I can do!

Kieren