Posts Tagged ‘ Carousel ’

Simple Carousel With Paging Using Mootools

Tuesday, December 9th, 2008 By Nikhil

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!!!

My Example looks like this…[View Demo]
Mootools Carousel With Paging

View Demo | Download Mootools Carousel With Paging Version 1.0 (Downloaded 2504 times)

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);

.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

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

Mootools 1.2

View Demo | Download Mootools Carousel With Paging Version 1.0 (Downloaded 2504 times)

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter