Themeforest

Light-Weight jQuery Animated Slider

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 …

View the jQuery light weight slider demo

Download source files

6 Comments

  • Hi,
    this slider is great. I’ve a question, is it possibile to make it in such a way that after X seconds it automatically shift to the next element?

    could you give me a tip on how this could be implemented?

    thank you!

    • Hi,

      you can use the setTimeout function and use the same functions as with the button click to move the slide. The only difference being that you would need to get the index of the active item and use this in place of “integer”. Then reset the new active item to be integer+1

      setTimeout(function(){
      
           // Enter animation functions
      
      }, 10000);
      

      Set the “10000″ to be the length of time between slides in milliseconds

      • Sorry, there is something i don’t get…

        the object $(this), only exist in the moment you click….so i don’t understand how to handle it.

        Sorry for my non-understanding, it’s my first website :P

        thank you again for you answer again, fast and clear for someone more expert then me!

        • i hope this will help others…

          setInterval(function(){

          // Enter animation functions
          var $slideNow = $(‘#control .active’);
          $slideNow.removeClass(‘active’);

          if($slideNow.is(‘:last-child’)){
          var $slideNew = $(‘#control a:first’);
          } else {
          var $slideNew = $slideNow.next();
          }

          $slideNew.addClass(‘active’);
          var integer = $slideNew.index();
          $(‘#light-slide ul’).animate({“left”: -400*integer}, 400);

          }, 3000);

  • Thank you!

    I’ve been looking for a lightweight slider for a day now and I finally found one that I can work with! So many JS developers put overly complex code into their site and don’t let the look be controlled by the CSS, It weems that omost developers say: “if I’m building a JS script, why should I trust my end user to be able to style it themselves, i’ll just include the css and make umteen nested divs show up? So what if the file is 50k!”

    Thanks for making this right, and simple!

    • Hi,

      Thank you. Agree with you about many of the jQuery plugins being too complicated!

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags