Simple Cross Browser Carousel with Paging using Mootools

With a variety of Carousels out there , many for Mootools as well, I still decided to write my own Carousel Class, for some good reasons
1. Wanted a paging feature ( to be able to jump a particular slide/step in the carousel).
2. Wanted freedom with placement of the LEFT and RIGHT buttons/links , where ever I please.
3. More control over the Slide Steps.

I did manage to create a new Carousel , with the above features ...as below ... Feel free to suggest any modifications you would require!!!

Carousel Expample 1 Without paging


Rs. 1,000

Rs. 2,000

Rs. 3,000

Rs. 4,000

Rs. 5,000

Rs. 6,000

Rs. 7,000

Rs. 8,000

Rs. 9,000

Rs. 10,000

Rs. 11,000

Rs. 12,000

Carousel2 Expample 1 With paging

Flower 1
Flower 2
Flower 3
Flower 4
Flower 5
Flower 6
Flower 7
Flower 8
Flower 9
Flower 10

Download Source Here

1. Carousel Paging

You can easily add the paging to your carousel, simply by setting the paging flag, which is last parater passed while creating the instance of the MooCarousel to true( want paging) or false( donot wanting paging).
var carousel1 = new MooCarousel('carousel1_wrapper','carousel1_items_container','carousel1_moveleft','carousel1_moveright',c_ns,c_sss, true); //ns= number of slides , sss = slide step size
And ofcourse you can change the look-n-feel of these paging achors as you please by modifying their CSS.
.carousel_paging {text-align:right; margin:5px 10px 0 0;} .carousel_paging .current, .carousel_paging .page{ outline:none; width:15px; height:15px; line-height:15px; text-align:center; display:block; float:left; background:#D8D8EB; margin:0 1px 0 0; text-decoration:none;} .carousel_paging a:hover, .carousel_paging .current{background:#4D4D9B; color:#ffffff;}
Well! there is a small issue though, The paging anchors if set, then it will get generated always after the Carousel component. I wanted to make it dynamic as well, but then just to keep the Script for blowing out of proportions, I decided to skip it. But you know a little Javascript , you could easily modify the paging generation code in the MooCarousel class to please your needs.

2. Customising the Left & Right Icons

You can change the PLACEMENT, IMAGES or any displat property of the Left and Right Buttons simply by playing around with the CSS. to be able to change the placements of the Left and Right buttoms was the actual reason for me to right my our Carousel Class. Since this MooCarousel Class, accepts the id's of these buttons, you can actually place these buttons anywhere on the page, if you please... it does not have to be in the element hierarchy, as in my example.
var carousel1 = new MooCarousel('carousel1_wrapper','carousel1_items_container','carousel1_moveleft','carousel1_moveright',c_ns,c_sss,true);

CSS
.carousel_container_l, .carousel_container_r{margin:50px 0 0 0 ; position: relative;width: 23px;height:20px; float:left; cursor:pointer; } .carousel_container_r{background-position: 0 -38px; } .carousel_container_l{background-position: 0 -58px; }

3. Customising Slide Steps

WHAT DO I MEAN MY CUSTOMISING SLIDE STEPS?
 Most Carousels slide the full with of the visible window. So say you had four items (like in my sample above), it will slide all the four items. With this Carousel Component, You pass the number of slides and the step size of your choice.
var carousel1 = new MooCarousel('carousel1_wrapper','carousel1_items_container','carousel1_moveleft','carousel1_moveright', c_ns,c_sss, true);
c_ns= number of slides , c_sss = slide step size
Also, in my example1 I have calcuted the slide step size, based on logic where , I know number of items , width on each item and the margins that have given after each item in my CSS.
/*For Carousal 1 */
var c1_w = 92; // Carousal Item Width
var c1_n = 10; // Total Number of Comparision Carousal Items
var c1_pp = 4 // Number of Comparision Carousal Items perpage
var c1_marginFactor = 51;
var c1_sss = c1_w * c1_pp ; //sss = slide step size
var c1_ns = parseInt(((c1_w * c1_n)/c1_sss) + .5); //ns= number of slides
c1_sss += c1_marginFactor ; //sss = slide step size , 51 for margins


Requirements: Mootools 1.2
Download Source Here