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.



Details

Author
Rafał Ronowicz
Current version
v0.1
GitHub
rron/siteSlider
Downloads
2409
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • _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>
    </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.

blog comments powered by Disqus