Glider

Posted by paul on April 7th, 2008

Horizontal glider using glider.js available here.

Glider is dependent on the Prototype and Scriptaculous libraries, both of which are included in the glider download, as is the required stylesheet.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<link rel="stylesheet" href="stylesheets/glider.css" type="text/css">
 
<script src="javascripts/prototype.js"></script>
 
<script src="javascripts/effects.js"></script>
 
<script src="javascripts/glider.js"></script>
 
 
 
      <div id="glider">
 
          <div class="controls">
 
              <a href="#tab1">Tab 1</a> |
 
              <a href="#tab2">Tab 2</a> |
 
              <a href="#tab3">Tab 3</a> |
 
              <a href="#tab4">Tab 4</a>
 
          </div>
 
 
 
          <div class="scroller">
 
              <div class="content">
 
                  <div class="section" id="tab1">Tab 1</div>
 
                  <div class="section" id="tab2">Tab 2</div>
 
                  <div class="section" id="tab3">Tab 3</div>
 
                  <div class="section" id="tab4">Tab 4</div>
 
              </div>
 
          </div>
 
      </div>
 
 
 
      <script>
 
          new Glider( 'glider', { duration:0.5 } );
 
      </script>

Notes
You can create multiple gliders on one page.

You can determine which section will be scrolled to initially by using the initialSection option -
i.e. {initialSection: ’section4′}}

You can make the Glider periodically update by using the autoGlide and frequency options -
i.e. {autoGlide: true, frequency: 4}

See also: http://zendold.lojcomm.com.br/icarousel/example6.asp#

Inspired by: www.panic.com/coda.

Prototype extension: Carousel
http://dev.victorstanciu.ro/experimente/prototype-carousel/en/#download

Carousel Examples

http://scripteka.com/script/carousel

http://www.goodbarry.com/home

Coda-Slider

Design Police

Layout

Leave a Comment