Scrollable plugins in action
Here are the available plugins in action:
You can additionally see a demo where all the plugins are used together. Each demo here is built upon the minimal setup.
Navigator plugin
Provides navigation buttons for switching between pages.
standalone demoHTML setup
By default the plugin searches for an element whose CSS class name is "navi" and auto-generates the navigational buttons inside this element. In our previous setup we have placed the following DIV above the scrollable:
Afterwards the plugin will transform the empty DIV into the following structure:
We have styled the navigator with the scrollable-navigator.css file which looks like this:
You can alternatively generate the navigator links manually as we do in our next demo.
JavaScript setup
View the documentation of the navigator plugin.
Autoscroll plugin
Makes the scrolling automatic. You can play with the action buttons below the scrollable. The autoscrolling will pause if you interact with the scrollable with your mouse.
standalone demoJavaScript setup
This time we have supplied two configuration options for the plugin. By disabling the autoplay configuration option, the autoscroll won't start when the page loads. Just like all the tools, the plugins also support the api configuration option so that you have an easy access to the tool's programming interface. The API is being used by the action buttons.
Action buttons
The difference between pause and stop is that when the autoscroll is in the paused state the playback will resume if the user interacts with the scrollable with the mouse.
View the documentation of the autoscroll plugin.
Chaining plugins
Here we use all the plugins together. We have also enabled mousewheel and circular options.
standalone demo