### Sliding Panels Sample

- Example 1: Vertical Sliding
- Example 2: Horizontal Sliding
- Example 3: Sliding in Both Dimensions
- Example 4: Turning Off Keyboard Navigation
- Example 5: Turning Off Animation
- Example 6: Fine Tuning the Panel Animation
- Example 7: Specifying the Default Panel
- Example 8: Alternate Styling

#### Example 1: Vertical Sliding

The CSS for a SlidingPanels widget is setup so that it slides vertically by default. You can change the current panel by calling the showPanel() method on the widget and passing in either the zero-based index of the content panel, or the ID of the content panel.

Navigate by index: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Navigate by id: p1 | p2 | p3 | p4 | p5 | p6 | p7 | p8 | p9

Other navigation methods: First | Previous | Next | Last

Panel 1
Panel 2
Panel 3
Panel 4
Panel 5
Panel 6
Panel 7
Panel 8
Panel 9

#### Example 2: Horizontal Sliding

With a little modification to the CSS to extend the width of the SlidingPanelsContentGroup, you can make the SlidingPanels widget slide horizontally:

    #example2.SlidingPanels {
    	float: left;
    }
    #example2 .SlidingPanelsContentGroup {
    	float: left;
    	width: 10000px;
    }
    #example2 .SlidingPanelsContent {
    	float: left;
    	width: 600px;
    }

Navigate by index: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Navigate by id: p1 | p2 | p3 | p4 | p5 | p6 | p7 | p8 | p9

Other navigation methods: First | Previous | Next | Last

Panel 1
Panel 2
Panel 3
Panel 4
Panel 5
Panel 6
Panel 7
Panel 8
Panel 9

#### Example 3: Sliding in Both Dimensions

With a little modification to the CSS to extend the width of the SlidingPanelsContentGroup and float the SlidingPanelsContent, you can make the SlidingPanels widget slide in both the horizontal and vertical directions.

    #example3.SlidingPanels {
    	float: left;
    }
    #example3 .SlidingPanelsContentGroup {
    	float: left;
    	width: 900px;
    }
    #example3 .SlidingPanelsContent {
    	float: left;
    }

Navigate by index: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Navigate by id: p1 | p2 | p3 | p4 | p5 | p6 | p7 | p8 | p9

Other navigation methods: First | Previous | Next | Last

Panel 1
Panel 2
Panel 3
Panel 4
Panel 5
Panel 6
Panel 7
Panel 8
Panel 9

#### Example 4: Turning Off Keyboard Navigation

To turn off keyboard navigation, remove any tabindex attribute off of the top-level element for the widget:

Navigate: First | Previous | Next | Last

Panel 1
Panel 2
Panel 3
Panel 4
Panel 5
Panel 6
Panel 7
Panel 8
Panel 9

Or, pass in an enableKeyboardNavigation:false constructor option. This will allow the widget to get focus, but will disable the previous and next keys:

Navigate: First | Previous | Next | Last

Panel 1
Panel 2
Panel 3
Panel 4
Panel 5
Panel 6
Panel 7
Panel 8
Panel 9

#### Example 5: Turning Off Animation

To turn off the panel switching animation, simply pass an enableAnimation:false constructor option:

Navigate: First | Previous | Next | Last

Panel 1
Panel 2
Panel 3
Panel 4
Panel 5
Panel 6
Panel 7
Panel 8
Panel 9

#### Example 6: Fine Tuning the Panel Animation

You can fine tune the panel switching animation by adjusting the duration and fps constructor arguments. The 'duration' constructor argument is expressed in milliseconds. While the 'fps' is an integer number that expresses the number of frames per second.

Navigate: First | Previous | Next | Last

Panel 1
Panel 2
Panel 3
Panel 4
Panel 5
Panel 6
Panel 7
Panel 8
Panel 9

#### Example 7: Specifying the Default Panel

You can specify which panel displays by default when the widget is first displayed by passing in the zero-based index of the panel, its ID, or the panel's node itself, via the defaultPanel constructor option:

Navigate: First | Previous | Next | Last

Panel 1
Panel 2
Panel 3
Panel 4
Panel 5
Panel 6
Panel 7
Panel 8
Panel 9