Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Capricorn 15's. Born 2244. Enter the Carousel. This is the time of renewal. Be strong and you will be renewed.

If I am going to make a Carousel plugin for jQuery, it had better make reference to Logan's Run.

jquery-renewal is a jQuery plugin that makes a carousel. It works kind of like this:

|\          \                                       |
| \          \                                      |
|  +----------+                                     |
|  |          |                                     |
|  |          |                                     |
|  |          |                                     |
 \ |        \ | 
  \|         \| 

The element in front acts as a window to an element positioned "behind" it. The element can move behind it, by using a couple of methods.

  \          \                     |
   \          \           <-       |
    +----------+                   |
    |          |                   |
    |          |          <-       |
    |          |                   |
  \ |        \ | 
   \|         \| 

Why yet another jQuery carousel plugin?

Here are some of the goals of this project:

  1. Good test coverage. Because we're all professionals here. Specs are written with Jasmine and Jasmine-jQuery.
  2. Few opinions. Most carousel plugins do a lot of mucking about on element styles that I think you should handle on your own.
  3. It doesn't have to be a list. Any element with children can effectively become a carousel.
  4. Have an API. That's really important.


Here's how your HTML should be structured:

    and so forth

You call it like this:


Under the Hood

.a_wrapper effectively becomes the foreground "window" element in the above illustration. .a_wrapper gets an additional class name and overflow-x: hidden; and the width is restricted to how many elements you want visible.

.the_carousel becomes the carousel, and these styles are applied:

.the_carousel {
  position: relative;
  width: (the total width of the children of .the_carousel);
  left: 0;

And that's all that happens in terms of styling.


  var element  = $('.the_carousel').renewal(),
      carousel ='carousel');

carousel is a Renewal object and you can call methods on it:

  How many elements are in the carousel
  What is the current position of the carousel (0 indexed)
  Get the jQuery element at the current position
  Get the configuration for this particular carousel
  Advance the carousel
  Move backwards through the carousel
carousel.moveTo(position, [speed, easing])
  Lower level method to move to a certain position in the carousel

But how do I actually move the thing?

Other carousel plugins set up next and previous buttons for you and maybe even position indicators. jquery-renewal does not do this, you should do this.

Beyond calling the methods on the Renewal object itself, you have access to some events:

  Triggering will call Renewal#advance
  Triggering will call Renewal#reverse
  This is triggered in the call to Renewal#moveTo
  This is triggered before the carousel begins moving
  This is triggered after the carousel has finished it's movement

In practice

$('').click(function (e) {

$('button.previous').click(function (e) {

$('.carousel').bind('renewal.move', function (e) {
  // The carousel has moved!


jquery-renewal has a few defaults. Overwrite them simply:

  accessor: 'carousel',                      // The key to access the Renewal object on the element
  easing: null,                              // String name of an easing function
  eventAdvance: 'renewal.advance',           // The event for advancement
  eventMove: 'renewal.move',                 // The event for movement
  eventReverse: 'renewal.reverse',           // The event for reversal
  speed: 150,                                // The duration of animation
  start: 0,                                  // The starting position of the carousel
  visible: 1,                                // How many elements should be visible at one time
  wrapperClass: 'renewal-carousel-container' // The class name given to the wrapper

If visible is falsy, the width of the wrapper ($('.a_wrapper')), is not affected at all.


$ wget

Put it in a script tag.


  • Make better examples
  • Make a homepage
  • Add an option to make carousels circular (infinitly repeating)
  • Add an option to make a vertical carousel
  • More events?


Enter the Carousel. This is the time of renewal. Be strong and you will be renewed.







No packages published

Contributors 4