siteSlider v0.1

Using siteSlider create slides, which you can scroll to the right or left. Let's say you have four elements in the code marked by the same class - for example <div class="frame"></div> - each with a different content. When the script runs, it assigns to each of these elements the same height and width, as the browser window actually has. Then assigns a previously declared elements of navigation functions, through which the scroll is carried out to further elements to the left - or right.

Demo included, just download.


Rafał Ronowicz
Current version
GitHub Issues



  • _self_/_current_:
    • MooTools 1.3 core or higher (tested with 1.4.5)
    • MooTools 1.3 core

How to use

At first, we have to set some markup. In general, we need to create elements which will hold some content, with the same class - for example frame. Then add elements, which should be our triggers for sliding site. The last thing out there, is to put elements (for example list with <li> nodes), equal in number of frame class holders.

<div id="container">
  <div id="controls">
    <div id="sliderLeft">click to move slider left</div>
    <div id="sliderRight">click to move slider right</div>
    <ul id="selectFrame">
      <li class="link"><a href="#">frame 1</a></li>
      <li class="link"><a href="#">frame 2</a></li>
      <li class="link"><a href="#">frame 3</a></li>
      <li class="link"><a href="#">frame 4</a></li>
  <div class="frame">
    <p>content of frame 1</p>
  <div class="frame">
    <p>content of frame 2</p>
  <div class="frame">
    <p>content of frame 3</p>
  <div class="frame">
    <p>content of frame 4</p>

Then, we should add some styling:

body {

#container {

#controls ul {
  top:150px; left:150px;

#controls li {
  float:left; margin:0 10px;

#sliderLeft, #sliderRight {

#sliderLeft {

#sliderRight {

.frame {
  float:left; height:100%; width:100%; overflow:hidden;

IMPORTANT thing if We want to use it also in IE7 !

add that line to styles used for IE7 (ie. HTML conditional comments providing IE7 specified stylesheets or hacks, like in this demo ;))

html {
  overflow: auto;

Last thing, is to include some js code running our slider !

window.addEvent('domready', function()  {

  var ss = new SiteSlider({
    frames: '.frame',
    navs: ['sliderLeft', 'sliderRight'],
    duration: 700,
    transition: Fx.Transitions.Quad.easeInOut,
    menuNav: true,
    menuNavName: 'selectFrame'


Main Features

  • enable to set unlimited (ofcourse, limited... by sense :)) frames
  • if frame has bigger height of content, than the browser window, it will have overflow-y: scroll added. Donty worry about that.
  • navigation provided by two different ways. By left/right buttons, or by menu which directs us to correct frame. You can use it alternately.
  • compatibility with all modern browsers: IE6+, FF 3.6+, Opera9+, Safari and Chrome.
  • it is easy to customize, and easy to use

Modifications From V 0 1

  • Fixed issues with buggy sliding to 'empty' or inaccurate frames while changing triggers from arrows to menu and vice versa
  • added feature which hide all scrollbars from each frame, and show it just when needed - when animation of sliding is ended on current frame

To Do Future Plans

  • Add functions triggered after reaching also first and last frame. In that moment it just stops, but i want to provide some additional function as an option for constructor
  • (ambitious one...) Add posibility to draw frames in 'multiple lines'. Slide from right top frame, to left bottom one for example
  • add control by keboard keys


  • MooTools 1.3 or higher (also tested with 1.4.5)


  • frames - css class to select frames
  • navs ie: ['slideLeft', 'slideRight'] - array with animation triggers for moving left and right
  • menu - css selector for providing animation from menu
  • transition - MooTools Fx class used in animation
  • duration - duration of animation
  • menuNav - set to true if we will use menu for navigation between slides
  • menuNavName - css selector for navigation menu


A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus