logo

  • Blog
  • My Shopify Themes
  • Twitter
  • RSS

Simple jQuery Carousel Slider Tutorial

on Saturday, 07 April 2012.

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.

  • Tags: Animation, Carousel, How to, jQuery, Slider, Tutorial
Tweet
blog comments powered by Disqus
Filter By
  • How to,
  • Tutorial,
  • PHP,
  • Joomla,
  • CSS,
  • Animation,
  • SEO,
  • Database,
  • Download,
  • eCommerce,
  • Apache,
  • Mac OS X Lion,
  • Permissions,
  • Effects,
  • Javascript