Skip to content


Subversion checkout URL

You can clone with
Download ZIP
JavaScript Shell
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

Scroller plugin for mootools

The purpose of this Mootools plugin is to easily scroll a 'film' containg slide throught a 'window'.

How to use


<script type="text/javascript">
Demo = {};
window.addEvent('domready', function() {
    Demo.sc1 = new Scroller($('scroll1'), {duration: 500, autostart: true, autostart_dir:"back", sleep: 1000});


You will need a window div, a film div and some slides (without comments :D):

<!-- The window div (the one thought you see strip sliding) -->
<div id="scroll1" style="overflow: hidden; width: 215px; height: 100px; padding: 5px;">
    <!-- the 'film' containing slides -->
    <!-- Slide #1 -->

        <!-- Slide #2 -->


Class elements


new Scroller(WindowObject, {options})
  • WindowObject: (html object) the scrolling viewport object (div element)


  • duration: (integer) effect duration (ms)
  • selectBy: (string) child | class (def: child)
    • selecting by child, the scroller will use each child tags of the film as a slide
    • selecting by class, it will use as slide only child tags which classes contains 'slide'
  • autostart: (boolean) makes the slide start on init
  • autostart_dir: (string) forward | back (def: forward)
  • sleep: (integer) sleep time in ms beetween slide (in auto mode)
  • transistion: (string|transition object) animation algorythm for transition (see Fx.Fx documentation and Easing demo)
  • leftm: (interger) letf margin for micro adjustements
  • topm: (interger) top margin for micro adjustements


  • stop: stops the autoscroll
  • start(backward): starts the autoscroll
    • backward (opt boolean): if true, the slide goes backwards
  • next(stop): go to the next slide
    • stop (opt boolean): if true, it also stops the autoslide
  • prev(stop): go to the previous slide
    • stop (opt boolean): if true, it also stops the autoslide
  • updateTransition(options): Updates transition options and aply them
    • options (array): array conteining new values for options (duration and transition algorythm)


Mootools core 1.2.4:

  • Core : [Core, Browser]
  • Native : [Array, Function, Number, String, Hash, Event]
  • Class : [Class, Class.Extras]
  • Element : [Element, Element.Style, Element.Dimensions]
  • Utilities: [Selectors]
  • Fx : [Fx]

Mootools more 1.2.4:

  • Fx.Scroll
Something went wrong with that request. Please try again.