Rolling(writing) your own infinite carousel with JQuery

By | September 13, 2011

A while ago I was asked to create a infinite carousel widget on www.whitepages.co.nz Groupy is no longer part of Yellow and the widget will be taken off soon

as you know I had 2 options, use plugins or roll my own.
It’s personal, and I chose the latter. Simply because of the desire of knowing the mechanics underneath everything.

Before we start, I would like you be aware that, the code snippets in this article were written on the fly from my memory, so please excuse for any syntax errors.

Let’s roll!

First thing first, you will need JQuery. I mean, if you don’t know what JQuery is, you probably don’t want to proceed any further.

The concept of carousel:

A carousel should contains the following elements:

  • Some slides, inside
  • A slide holder, inside
  • A stage

Slides are the areas you want to show to your viewers, each slide has same width and height and floats left to each other

eg.

slide 1
slide 2

A slide holder inside a stage is to provide enough space for the slides so the slides won’t wrap to a second line, notice it has 2 x 100px width for 2 slides

eg.

slide 1
slide 2

A stage is a div element that has a fixed width and height, in this case we are showing one slide therefore width is 100px, notice the slide-holder is wider than the stage, and it will show up a horizontal scroll bar, we don’t want that, so we need to add overflow:hidden to the stage

eg.

slide 1
slide 2

Now, you have the basic structure for the carousel. To show the slide 2, you just need to scroll the stage to the right.

eg.

//jquery animate function to create scroll effect
$('#stage').animate({"scrollLeft":"+=100"});

Vise versa, you can figure out how to scroll back to slide 1.

 

The magic, infinite scroll with slide animation

Infinite scroll means when you hit the last slide and keep scrolling right, the first of the slide reappears on the right and so on.

To make it happen, you clone the slides, prepend and append to the original slides, so you have same set of slides on the left and on the right.

Make sure once you have done that, scroll your stage to the middle set, you will see the reason in a few moments

Magic moment, when you scroll right, you reduce the most the width of the most left slide to zero by animating it, which will create the effect of slide the carousel to left, once the animation is finished, you move the most left slide to the most right, in other words, the first slide become the last slide, and restore the width back to original, say 100px in this case

eg.

var slide_holder = $('#slide-holder);
//get the slides
var slides = $('div', slide_holder);
//animate width to 0, then move to the back and restore width
slides[0].animate({'width':0}, function(){
$(this).appendTo(slide_holder);
$(this).width(100);
});

by now, you should have a slide set look like this
slide 2, slide 1, slide 2, slide 1, slide 2, slide 1

Vise versa, to scroll left, you first shrink the furthest slide on the right to zero width, then move it to the most left, then slowly expand it’s width back to 100px in the case by animating it (refer to the above code)

And that’s it! it’s simple as that! If you are still struggling, feel free to drop me a comment.

2 thoughts on “Rolling(writing) your own infinite carousel with JQuery

  1. Christopher

    That looks good. I did something similar, only that I cloned the first and last slides. I inserted the cloned first slide after the last slide, and the cloned last slide before the first. The logic is when the right arrow is clicked on the last slide (the cloned first slide), first the view strip is moved to the first slide(after the cloned last slide), and slides as before 2, 3 ,4… The same goes for the reverse direction.

    Reply
    1. james_lin Post author

      Yeah, you can, but I thought just cloning the whole set writes less code and won’t put much more overhead into the DOM. However, if you have a long set of slides, eg more than 15, then you should start optimizing it by only cloning the first to the end, and the end to the first.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.