Swipe Library: Styling Pagination & Navigation

Last updated: 1 month ago

Category: Examples

The Swipe module is a carousel and rotating banner module that enables the cyclic display of media content such as text, images, videos, and iframes. It supports drag-and-drop scrolling as well as button-click slider switching. It also supports asynchronous content fetching, insertion, and deletion of sliders. The module responds to changes in sliders and the outer container, automatically adjusting the relationships between sliders.

Basic Styles for Pagination and Navigation

The two navigation buttons default to outline-only icons. You can set parameter nav.fill:true to make them solid icons.

Built-in Pagination Styles

Change pagination style by setting parameter pgn.type. Default is lamp (small indicator light), with options for thumb (thumbnail), index (numeric index), and text (text label).

Fetching Pagination from Data Source

For thumb and text pagination types, their data will first be taken from the thumb and label properties of the data source. Only if these don't exist will they fall back to reading from pgn.data.

External Pagination and Navigation

Change the position of pagination and navigation to anywhere using node selectors pgn.selector, nav.prev.selector, and nav.next.selector.

Using Statistics

Enable statistics by setting parameter total:true or total.enable:true.