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
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
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
The Sliding panel widget has by default the keyboard navigation enabled. You can navigate through the panels by pressing Left and Right keys or Up/Down keys. To have the keyboard navigation working you should have tabindex attribute specified for each panel.
On the example bellow, use PageUp/PageDown keys to open/close panels.
To turn off keyboard navigation, remove any tabindex attribute off of the top-level element for the widget:
Navigate: First | Previous | Next | Last
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
To turn off the panel switching animation, simply pass an enableAnimation:false constructor option:
Navigate: First | Previous | Next | Last
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
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