Browse > Home / AJAX, Design & Graphics, Programming, mootools / mooHorizonSlider

mooHorizonSlider

May 20, 2008 · Print This Article

this little slider class is build with the mootools framework 1.11. You can define various things:

* single image movement left / right
* multiple movement left / right
* scroll speed
* image container
* image size

In conjunction with the needed CSS style for the scroller, it creates an easy to use image slider. The slider class can be adjusted to fit your needs perfectly - imageWidth, imageCount, scrollRanges etc.

Check out the source of this page to see how it is implemented. You can also use this line of code, adjust it to your needs, copy the CSS to your file and get it going:

var p = new avScroll({container:’innerScroller’, imgWidth:233, scrollRange:24, leftHandle:’leftClicker’,rightHandle:’rightScroller’, rw:’leftFF’, ff:’rightFF’, speed:700});

Check it out here: moo horizontal slider

Written by admin · Filed Under AJAX, Design & Graphics, Programming, mootools 
Tagged: , , , , ,

Comments

5 Responses to “mooHorizonSlider”

  1. Eric J on May 21st, 2008 7:18 am

    Is there an easy implementation to make this class stop at both ends, when it reaches the ends. Both with the single and multiple movement?

    Well of course you could add a check where in the row the slider is positioned, and check whether a right/left scroll would scroll out over the end. On the left side handle for a single click this is already implemented, the right side should be done this way:

    if(leftClicks + 4 > scrollRange){
    stepsLeft = (scrollRange - leftClicks)*imgWidth; // size to scroll right
    start= this.leftClicks * this.imgWidth;
    $(this.container).effect('right',{ duration: this.speed, wait:true, transition: Fx.Transitions.Back.easeIn }).start(start,stepsLeft);

    Guess this should work out, you only need to add this for the single click event and for the multiple click, just adjust the “4″ to the value you have been using for the scrollRange.

  2. maco on June 24th, 2008 12:38 am

    pls how to exactly use this script from the comment to stop on the right side. because its not working.

  3. admin on June 24th, 2008 9:12 am

    Actually I am too busy, but if you have some time and be patient, I’ll come up with a solution and post it here.

  4. maco on June 24th, 2008 10:14 am

    Thanks I’ll be waitting. It’s very nice script, only this bug ..

  5. Shashank on June 28th, 2008 12:55 am

    This works. Its not the most optimized but works well. All the 4 : the left, right, fast forward and rewind work.

    leftClick: function(){

    if(this.leftClicks > 0){
    var start= this.leftClicks * this.imgWidth;
    var end = ( this.leftClicks - 1 ) * this.imgWidth;
    $(this.container).effect(’right’,{ duration: this.speed, wait:true, transition:Fx.Transitions.Back.easeIn }).start(start,end);
    this.leftClicks–;
    }

    },

    rightClick: function(){

    var start= this.leftClicks * this.imgWidth;
    var end = (this.leftClicks * this.imgWidth) + this.imgWidth;
    if(end < this.scrollRange) {

    $(this.container).effect(’right’,{ duration: this.speed, wait:true, transition: Fx.Transitions.Back.easeIn }).start(start,end);
    this.leftClicks++;
    }
    },

    fastForward: function(){
    // scroll 4 images to the right, calculate it on base of the clicks and the image width
    var start= (this.leftClicks) * this.imgWidth;
    var end = (( this.leftClicks + 4 ) * this.imgWidth);
    if(end 0){
    var start= (this.leftClicks * this.imgWidth );
    if(this.leftClicks < 4){
    this.leftClicks = 4;
    }
    var end = ((this.leftClicks - 4 ) * this.imgWidth);
    $(this.container).effect(’right’,{ duration: this.speed, wait:true, transition: Fx.Transitions.Back.easeIn }).start(start,end);
    this.leftClicks-= 4;
    }
    }

Got something to say?