OptionalalignOptionalfullscreenIf true, then:
Note that except in "carousel" style the pager's pages will be positioned absolutely, and so if you do not enable this option, you will need to manually set the height of the page parent element via CSS.
OptionalhorizontalOnly relevant is style is "slider" (default) or "carousel".
Transition pages sideways instead of vertically.
OptionalinitialSet the initial page number.
OptionalnextThis element will be assigned a click listener that goes to the next page.
If this is not given, then the top-level element that constitutes the
widget is searched for the first element that contains the
lisn-pager-next-switch class or the data-lisn-pager-next-switch
attribute, and this is used.
OptionalpagesThe elements that will make up the pages.
They do not have to be immediate children of the root element, but they should all be siblings.
The widget should have more than one page.
If this is not specified, then
lisn-pager-page class or the
data-lisn-pager-page attribute, and these are used as pages.script and style elements) are taken as
the pages.IMPORTANT: Unless the style is set to "carousel", the page
elements will be positioned absolutely, and therefore the pager likely
needs to have an explicit height. If you enable fullscreen, then
the element will get height: 100vh set. Otherwise, you need to set its
height in your CSS.
OptionalpageOnly relevant is style is "carousel".
The minimum page height (or width in horizontal mode) in pixels. This will determine the number of visible slides at any one width of the pager. Pages will still grow to fill the size of the carousel itself.
OptionalparallaxOnly relevant is style is "slider" (default) or "carousel".
Use a parallax effect for switching pages.
OptionalpeekOnly relevant is style is "carousel".
Whether to show a bit of the upcoming and/or previous pages that are hidden when not all fit.
OptionalpreventWhether to prevent the default action for events that would result in gestures.
NOTE: If true (default), then all events that originate from a device given in useGestures and that could result in a gesture will be prevented regardless of their direction and whether alignGestureDirection is true.
OptionalprevThis element will be assigned a click listener that goes to the previous page.
If this is not given, then the top-level element that constitutes the
widget is searched for the first element that contains the
lisn-pager-prev-switch class or the data-lisn-pager-prev-switch
attribute, and this is used.
OptionalstyleSet the style of the widget. This determines the basic CSS applied.
When importing the stylesheets in your project, if not using the full
stylesheet (lisn.css) you can import either pager.css which contains all
three pager styles, or only pager-<style>.css.
NOTE: The base css only includes the minimum required for positioning and transitioning pages. The switches and toggles are intentionally not styled for flexibility. You should style those in your CSS.
IMPORTANT: Unless the style is set to "carousel", the page
elements will be positioned absolutely, and therefore the pager likely
needs to have an explicit height. If you enable fullscreen, then
the element will get height: 100vh set. Otherwise, you need to set its
height in your CSS.
OptionalswitchesIf given, these elements should match one-to-one the page elements.
Each toggle element will be assigned a click listener that switches the pager to the page.
If this is not specified, then the top-level element that constitutes the
widget is searched for any elements that contain the lisn-pager-switch
class or the data-lisn-pager-switch attribute, and these are used as
switches.
OptionaltogglesIf given, these elements should match one-to-one the page elements.
Each toggle element will be assigned a click listener that toggles the enabled/disabled state of the page.
If this is not specified, then the top-level element that constitutes the
widget is searched for any elements that contain the lisn-pager-toggle
class or the data-lisn-pager-toggle attribute, and these are used as
toggles.
OptionaluseTransition pages upon user scroll-like and drag-like gestures via the given GestureDevices. If set to true, then gestures using all device types are supported.
Note that drag gesture is only supported by the "pointer" device and also the "pointer" device only supports drag gestures, so if you want to disable drag gestures, simply pass "wheel,key,touch" as this option.
If true, then pages will be advanced backwards/forwards regardless if the gesture direction is horizontal or vertical.
If false then, a gesture will go to the next page only if its direction is down if horizontal is false/right if horizontal is true, and to the previous page only if the gesture direction is up if horizontal is false/left if horizontal is true.
IMPORTANT: If fullscreen, preventDefault and alignGestureDirection are all true, then the pager's scrollable parent must be scrollable in the same direction as the pager orientation, otherwise automatic scroll beyond the last/first page won't work.