Simple jQuery Carousel Slider Tutorial

This is a simple jQuery carousel slider that I use quite often in my projects, it's the most basic version and a great starting point if you want to learn how to use animation with jQuery.

With this slider you'll be able to easily change the dimensions, animation times, and choose custom classes/id's for the container and slides (handy for applying to existing html).

Demo

Play with the Code

• jsFiddle Editable Demo

Download

• Download the jQuery Slider demo files
• or view them on Github

HTML

<ul class="slider">
 <li>
   <img src="/image-1.jpg" />
 </li>
 <li>
   <img src="/image-2.jpg" />
 </li>
 <li>
   <img src="/image-3.jpg" />
 </li>
 <li>
   <img src="/image-4.jpg" />
 </li>
</ul>

CSS

.slider {
  margin: 10px 0;
  width: 580px; /* Update to your slider width */
  height: 250px; /* Update to your slider height */
  position: relative;
  overflow: hidden;
}

.slider li {
  display: none;
  position: absolute; 
  top: 0; 
  left: 0; 
}

jQuery Javascript

jQuery(function($) { 

  // settings
  var $slider = $('.slider'); // class or id of carousel slider
  var $slide = 'li'; // could also use 'img' if you're not using a ul
  var $transition_time = 1000; // 1 second
  var $time_between_slides = 4000; // 4 seconds

  function slides(){
    return $slider.find($slide);
  }

  slides().fadeOut();

  // set active classes
  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);

  // auto scroll 
  $interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
  );

});

More to Come

This is the first to come of a series of tutorials on jQuery sliders. I'll be adding more features soon.