Contents

Creating a CSS3 jQuert carousel from scratch

In the carreer of each backend developer there comes a moment where he (or she) wants to build a complete web application from scratch, at home, with the curtains closed. In that process we inevitably bump into the need to 'move stuff around the screen'. But we don't know how to do that, because we rather concern ourselves with object orientend design and databases. I guess frontend developers have a word for moving stuff around the screen. It is called 'animation'. And when we want to move a number of items in horizontal direction it is called a "carousel".

Since I have to integrate a carousel into an existing application frontend I need to learn how to create a simple carousel from scratch and I'd thought I'd share my experience with you.

The criteria for my carousel are as follows

  1. Scroll an arbitrary number of elements left or right, nicely, smoothly.
  2. Start scrolling either by event (mouseclick for example), or automatically using a set interval. 
  3. It must be simple and since I learned CSS transitions are simple, I am using that.

First, let me quote from w3schoolswhat a CSS transition is.

CSS3 transitions are effects that let an element gradually change from one style to another.
div { -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; }