Light-Weight jQuery Animated Slider(JQuery)

Today’s tutorial is a brief look at the jQuery animate function and how this can be used to create a very quick and easy content slider from an unordered list and a few lines of jQuery.
Whilst there are a lot of plugins out there for creating slick jQuery sliders sometimes all you need is a few lines a code to come up with your own features and in fact this simple code snippet is only 580 bytes!

View the jQuery light weight slider demo
Download source files

The HTML Code

The slider will be created from a very simple unordered list, which we wrap in a container tag. The jQuery will automatically handle any number of list items so we can add as many as necessary. Since its created from straight forward HTML our slider can contain any content including text, images, etc:

<div id="light-slide">   <ul>     <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra, elit sed hendrerit condimentum, libero elit tincidunt mauris, id rutrum tellus leo at urna. Fusce dui mi, lacinia sit amet blandit vitae, interdum ut eros.</li>     <li>Aenean scelerisque ipsum a nunc placerat sed blandit odio sollicitudin. Donec sed velit id ipsum lobortis tincidunt a sit amet leo. Praesent sit amet nisl a arcu lobortis egestas. Nunc at felis in erat condimentum ornare vel vel nisl.</li     <li>Suspendisse iaculis sodales dui pretium faucibus. Praesent vitae ipsum justo, id tempor tellus. In nulla leo, dignissim quis luctus sed, commodo nec velit. Aliquam ac nisl quam, quis tincidunt magna.</li>     <li>It elit sed hendrerit condimentum, libero elit tincidunt mauris, id rutrum tellus leo at urna. Fusce dui mi, lacinia sit amet blandit vitae, interdum ut eros. Nulla egestas imperdiet rutrum. Praesent vel metus ligula.</li>   </ul> </div>

So, in our example we have 4 list items, all wrapped in a div tag, which has the id “light-slide”.

The jQuery Code

The jQuery basically comes in 2 parts – the first section creates the control navigation buttons for our content slider and the second part handles the animation function when we click a control button:

$(document).ready(function (){   // Here we check how many list items are present and generate the correspdonding number of control buttons //     var controlHtml = '<div id="control">';     $('#light-slide li').each(function(){         controlHtml += '<a href="#"></a>';     });     controlHtml += '</div>';     $('#light-slide').after(controlHtml);   // Set the first button to "active" //   $('#control a:first').addClass('active');   // Next we define the click event and subsequent animate function that will move our slider to the correct position //   var $slideButton = $('#control a');   $slideButton.click(function(e){       $slideButton.removeClass('active');       $(this).addClass('active');       var integer = $(this).index();       $('#light-slide ul').animate({"left": -400*integer}, 400);       e.preventDefault();     }); });

So in the above code, when one of the slider buttons is clicked the jQuery code checks the position of the button using index() and moves the unordered list sideways based on the list position x the list item width – in this case 400px. So if we click button #3 our list will be moved 800 pixels to the left, therefore showing slide number 3 in the viewing area.

The CSS

There are a few CSS rules, which are essential for the jQuery to be effective:

/* The slider container width needs to be fixed based on the width of one of our list items and the overflow set to "hidden" to hide the other items */ #light-slide {width: 400px; height: 200px; overflow: hidden; position: relative;} #light-slide ul {height: 200px; position: absolute; top: 0; left: 0;} /* We set the width and the height of each list item to match the slider container */ #light-slide li {width: 400px; height: 200px; float: left;} /* The following code just sets the control button styling */ #control a {background:#999;padding:6px;display:block;float:left;margin-right:5px;} #control a.active{background:#111;padding:6px;display:block;float:left;outline:none;}

And that is basically it …