MooTools

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>
    </ul>
  </div>
  <div class="frame">
    <p>content of frame 1</p>
  </div>
  <div class="frame">
    <p>content of frame 2</p>
  </div>
  <div class="frame">
    <p>content of frame 3</p>
  </div>
  <div class="frame">
    <p>content of frame 4</p>
  </div>      
</div>

Then, we should add some styling:

body {
  overflow:hidden;
}

#container {
  overflow:hidden;
}

#controls ul {
  position:absolute; 
  top:150px; left:150px;
}

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

#sliderLeft, #sliderRight {
  position:absolute; 
  top:50%; 
  width:80px; 
  height:80px; 
  margin-top:-40px; 
  cursor:pointer; 
  background:#AFAFAF;
} 

#sliderLeft {
  left:0;
}

#sliderRight {
  right:0;
}

.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

Requirements

• MooTools 1.3 or higher (also tested with 1.4.5)

Options

• 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

Discuss

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.