Rolling(writing) your own infinite carousel with JQuery

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.