x

Example 1: The distinction between 'panes' and 'item's. Three '5-item' panes, pane 2 has only 3 items ('Scrollable' scrolls the panes, not the pane contents).

1 (Selectable)
1 (link)

2
3
4
5
6
7
8
11
12
13
14
15

Example 2: Something to watch out for with 'circular : true'... (panes are 'cloned')

1
2
3

Example 3: Adding Panes. Starts with two '3-item' panes, 'circular: false' (CSS control of 'next' & 'prev' button visibility, here visible only when panes > 3 (click on 'focus' button to scroll panes with arrow keys before adding panes).

1
2
3
4
5
6
2 panes

Example 4: Scrolling one 'picture'(item) at a time and stopping scrollable before end. (this is a 'cheat', just hiding the 'next' button, with keyboard/mousewheel disabled - does not stop scrolling with keyboard or mousewheel when these are enabled - also does not stop scrolling on touch devices)

1
2
3
4
5
6
index 0

Example 5: Vertical Scrolling (just for a change!) one 'picture'(item) at a time and stopping scrollable before end - getIndex and disable scrollable api. 'Circular' Horizontal scrollables nested inside pages 2 and 4 of the vertical. Works with keyboard and Mousewheel enabled [This great solution for stopping the scrollable provided by Jason Carr, see http://www.jasoncarr.com/technology/jquery-tools-scrollable-stop-scrolling-past-the-end]

1
2a (click me)
2b
2c
2d
2e
2f
3
4a (click me)
4b
4c
4d
4e
4f
5
6