Build a simple semantically valid carousel from scratch (part 4)

In the latest weeks we had discuss about a simple semantic carousel that will suite perfectly the concept of Progressive Enhancement. Then, how I’ve promised in the previous article, we will animate the carousel implementing the methods moveNext, movePrev and apply some animations to the carousel.

Some basic concepts

First of all let’s discuss the animations effects:

• When you click the “next” link:
  1. the first next invisible item in the carousel will become the far item on the right
  2. the far item on the right will become the near item on the right
  3. the near item on the right will become the current item
  4. the current item will become the near left item
  5. the near left item will become the far left item
  6. the far left item will disappear.
• When you click the “previous” link:
  1. the first previous invisible item in the carousel will become the far item on the left
  2. the far left item will become the near left item
  3. the near left item will become the current item
  4. the current item will become the near right item
  5. the near right item will become the far right item
  6. the far right item will go out of the view.
• When the current item is the first list item the “previous” link will not work.
• When the current item is the last list item the “next” link will not work

Items behavior

When the central item and the far right item of the carousel will become the near left item and the near right item they will adapt their size to the midSize width/height and will be appplied a transparency as defined in midOpacity property.

Meanwhile the Current Item and the right far item will become the Near item both left and right, the near left item will become the far left item reducing its size to the far left item applying the opacity defined in the minOpacity.

The Near item on the right will become the Current Item and will be resized to the maximum size defined in maxSize its new opacity is defined in maxOpacity.

Because the behaviors of each element is similar to the others, all them must move from a location to another, change their opacity and size, we’ll build a single method that will manage this behavior:

function moveTo( $selector, $margin, $opacity, $w, $h, $last ){
    $inProgress = true;
    if($last){

        var $updateFunction = function(){
            hideTheExceding();
            locateElements();
        }
    }else{
        updateFunction = null;
    }
    jQuery($selector, ul).animate({
        marginLeft: $margin,
        opacity: $opacity,
        width: $w,
        height: $h
    }, options.speed, $updateFunction);
}

The above method will accept:

1. the CSS Selector, used to point to the exact item of the carousel,
2. the destination where it must reach to the end,
3. the final opacity,
4. the final width and final height,
5. a boolean value that will tell to the method if it is the last moving animation so (after it) we can call the methods to correct every strange carousel behavior!

The movePrev and moveNext methods

As you can see in the moveTo() method we set a variable “$inProgress = true” so we can block the as I call them “compulsive link clicking user” (users that when found a link clicks twice! :-) )

So the first thing we have to do in both methos movePrev and moveNext is to check the status of $inProgress and if true we will exit without do anything.

As written in the above “basic concepts”, we have to ignore the click also if the current item of the carousel is the first or the last.

if($elements<$currentVisibleItem+2) return;

The moveNext method will be:

function moveNext(event) {
    event.preventDefault();
    if($inProgress) return;
    var $elements = jQuery('>li', ul).length;
    if($elements<$currentVisibleItem+2) return;
    $currentVisibleItem+=1;
    var $nextItem = $currentVisibleItem+2;
    var $nextToShow = '>li:nth-child(' + ($nextItem+1) + ')';

    jQuery($nextToShow, ul).css({
        opacity: '0.1',
        display: 'block',
        marginLeft: (jQuery(ul).innerWidth() + options.minSize)+ 'px',
        width: 0,
        height: 0
    });
    moveTo('>.far.before', -options.minSize, 0, 0, 0, false);
    moveTo('>.near.before', $farXL, options.minOpacity, options.minSize, options.minSize, false);
    moveTo('>.current', $nearXL, options.midOpacity, options.midSize, options.midSize, false);
    moveTo('>.near.after', $currentX, options.maxOpacity, options.maxSize, options.maxSize, $nextItem==$elements+1);
    moveTo('>.far.after', $nearXR, options.midOpacity, options.midSize, options.midSize, $nextItem==$elements);
    moveTo($nextToShow, $farXR, options.minOpacity, options.minSize, options.minSize, true);

}

The movePrev behavior is similar but in the other sense.

Well all the thinghs are done and our simple semantic carousel is complete and you can see it in a working demo there you can take a look to the HTML, CSS and Javascript developed in this tutorial (and in the previouses).

Obviously we can apply a lot of optimizations, features and customizing further the carousel like adding the title of the image in a label under the carousel… But why to make things complicated in a simple tutorial?

Now you can use it as is or begin from here to get your enterprise complex carousel plugin to show your images, news or whatever you want. Just tell me how did you use it and remember to tell the others how  I’ve helped you with this simple tutorial! I will apreciate it a lot!

Have a nice week and see you here soon!