Simple Carousel With Paging Using Mootools

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 [download#9#hits] 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);

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

View Demo | Download Mootools Carousel With Paging Version 1.0 (Downloaded [download#9#hits] times)

Tags: , ,


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


15 Responses to “Simple Carousel With Paging Using Mootools”

  1. lordfpx Says:

    Hello !

    I’m developping my new website using mootools and I just found this great carousel for my article menu ! Before I was using my own, but without paging.

    By now, the carousel is working just fine, but… My part of mootools code managing onclick and onmouse is not working with it anymore… It is working as soon as I delete the carousel code.

    Could you help me finding out what is wrong ?

    Here is the page : http://new.lordfpx.com, right after the menu opening, you will see you can’t click on an article. I can give you the code if you want.


  2. Nikhil Says:

    Lordfpx,
    I saw the page in FireFox 3, but quite dint understand, what did you mean by “right after the menu opening, you will see you can’t click on an article.”

    Also, I did notice that the page doesn’t load fine in IE7(There are runtime errors)

    Feel Free to send me your code on nik1409[at]gmail.com , will be happy to have look at it, if it helps in anyway

    regards
    N


  3. lordfpx Says:

    Yes, sorry, I haven’t tested the page on IE7 yet.

    On Firefox, when you click on an article, it should open on the right part, but when the carousel is present, it does nothing.

    I will send you my pages later since I’m at work.

    Thanks a lot !


  4. lordfpx Says:

    I found out where was my mistake !

    Since I don’t wanted the “Left & Right Icons”… I haven’t put them on my page and I just tryed to see if it was because of that… and yes it was the case…

    I think I will hide them on my website.

    Thank you


  5. Nikhil Says:

    Hey Lordfpx,

    Thanks for letting us know… This might some usefull for other trying to do the same.

    regards
    Nik


  6. matthew Says:

    hey, nice job 🙂 can someone tell me how i can do this paging in mootools 1.1? i haven’t moved to 1.2 yet.
    thanks 🙂
    mortal.matt gmail


  7. matthew Says:

    sorry that’s mortal.matt (at) gmail (dot) com, thanks again 🙂


  8. Adam Blakey Says:

    Hi,

    Please can you tell me how i make this auto play?

    Cheers, Adam


  9. jorge Says:

    thanks for this, your work is awesome. btw, what’s the license info on your code? i’d like to use this in a plugin i’m working on and i wanna know if it’s ok


  10. Nikhil Says:

    feel free to use as you like it ….


  11. kovi Says:

    Hi,

    this is really a good one, but when I use the JS from http://mootools.net/download (because of some other effects, I’m using) instead of your mootools12_all_p.js it stops working… how can i fix this? thanks a lot.


  12. Todd Says:

    How can I change the positioning of the pagination? I want it to be in the upper right corner, but I don’t want to use absolute or fixed positioning in css.


  13. Balu Says:

    So, you are using mootools, but still set width, number, etc. of the items manually. May I suggest something like this:

    carouselItems = $$(‘.carousel1_items’);
    c1_w = carouselItems[0].getSize().x; // Carousal Item Width
    c1_n = carouselItems.length; // Total Number of Carousal Items
    c1_pp = $(‘carousel1_wrapper’).getSize().x/c1_w; // Number of Carousal Items perpage

    Also parseInt() might be the wrong calculation that makes you miss a slide. Better use ceil():

    var c1_ns = ceil(((c1_w * c1_n)/c1_sss)); //ns= number of slides

    I’m not using the marginFactor at the moment, but you might be able to calculate that too ;).


  14. Balu Says:

    Sorry, that has to be Math.ceil() 🙂


  15. carter Says:

    Is there is an easy way to make this auto play?


Leave a Reply

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