MooSlides is a script for handling sliding panels with mootools.

MooSlides aims to be compact and easy to customize, meaning you can do pretty much anything you want/need with it.

Live Demo

How does it works?

It's quite simple actually…All you need is to setup a main div. This will be the main container, all your panels need to be in that div. Add as many panels as you want and make sure to set their class to ".panels". The only required style for your panels are height and width. You don't need to (and shouldn't) set the width or height of the outter(main) div, it will be calculated automatically. You can add paddings, margins and/or borders to your panels, the size will be calculated accordingly.

In other words you need:

  • A main div
    • Panel Div 1 (fixed with and height)
    • Panel Div 2 (fixed with and height)
    • Panel Div 3 (fixed with and height)

HTML Example

These are the required elements to create a mooslides.

<div id="main">
    <div id="panel1" class="panels"></div>
    <div id="panel2" class="panels"></div>
    <div id="panel3" class="panels"></div>

Creating a mooslides object

With the above in place, you can now create a mooslides object like this…

<script type="text/javascript">
window.addEvent('domready', function() {
    // Creates a new mooslides object will all possible options
    myslides = new mooslides('main', {
        customToolbar: false,
        autoStart: true,
        animationDelay: 5000,
        toolbarStyles: {
            'background-color': '#555'

About the toolbar

By default, mooslides will add a basic toolbar to your panels. This toolbar consists of:

  • An unordered-list (ul)
  • A list-item (li) for each of your panels
  • 2 Additional list-items for the previous and next buttons

If you don't want to have the default toolbar, you can create your own. If you choose to do so, the following functions will help you out (assuming you created a mooslides object called myslides…)

  • myslides.slideTo(panelId)
  • myslides.slideNext()
  • myslides.slidePrevious()
  • myslides.slideFirst()
  • myslides.slideLast()

Styling the default toolbar

If you want to use the default toolbar, you can style it. By default the toolbar buttons (list-items) are given the class "toolbar-button". You can style this class in anyway you want in your stylesheets. You can also set the "buttonClass" option and provide it with your custom class name.

The button corresponding to the currently active panel gets the class "active" added to it, this allows you to style the "current" button differently.

Here's the styles used in example 1 to get you started:

li.toolbar-button {
    display: inline;
    background-color: #262626;
    padding: 2px 5px;
    color: #ddd;
    cursor: pointer;
} {
    background-color: #666;


Mooslides will cause the "main" div to fire 2 events:

  • changed: the changed event is fired anytime there is a panel changing action (slideTo, slideNext etc..)
  • panelClick: the panelClick event is fired when a panel is clicked… it will also send the id of the panel that was clicked to your callback function.


The full documentation is available here:

Download and stuff

You can grab the latest code at mooslides' git repository:

If you are not familiar with git, just click on the Source Browser button. From there you can check out the source of all the files and grab what you need. Note that mooslides does not come with mootools. It requires Mootools 1.2 to run. An exact list of required module will be available shortly…

A minified version of version 1.0 can be found here:


Mooslides is released under the MIT license:

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License