View Pager

A versatile ViewPager controller, featuring both horizontal and vertical layout, gestures and automatic sliding.

Usage

1. Include zuix.js library

If not already included, add the following line right before the end of the head section in the HTML document:

<script src="https://cdn.jsdelivr.net/npm/zuix-dist"></script>

2. Load the scroll helper

Add the ctrl z-load attributes to the host element implementing the scrollbar (usually the main body or a div element):

<div ctrl z-load="@lib/controllers/view-pager">
<!-- Content pages of this ViewPager -->
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
</div>

The ViewPager will re-arrange all elements stacked horizontally or vertically accordingly to the chosen layout mode.
Elements do not necessarily require to be sized full screen, they can have different sizes, in which case the ViewPager will center the active element in the view.

Option attributes

  • ctrl z-load="@lib/controllers/view-pager" constructor
    load the view-pager controller on the element.
  • z-context optional
    identifier name to be used to reference this component from JavaScript.
  • z-options optional
    name of a global variable defining options to use for this component. See next page for details.
  • data-o-layout optional
    layout of elements can be horizontal or vertical. The default value is horizontal.
  • data-o-paging optional
    after scrolling, automatically select and focus the closest element centering it in the view. The default value is false.
  • data-o-slide optional
    slide-show mode (cycle elements). The default value is false.
  • data-o-slide-interval optional
    interval between each slide (milliseconds). The default value is 750.
  • data-o-passive optional
    use passive mode for best performance or disable passive mode to prevent default scrolling. The default value is true.
  • data-o-hold optional prevent touch events from being propagated to other elements off the view. The default value is false.
  • data-o-hide optional experimental
    set page visibility to hidden when off view. The default value is false.

Scripting

ViewPager object

A reference to a ViewPager instance can be obtained through its context identifier which is assigned by adding the z-context attribute to the ViewPager element and finally by using the zuix.context(...) method.

Since components are loaded asynchronously the zuix.context method might return null if called before the component is actually ready.
So, when not sure if the component is ready, a callback function can be passed as the zuix.context argument and it will be called once the component has been loaded, passing a reference to it as argument of the callback function.

<div z-context="my-view-pager" ctrl
z-load="@lib/controllers/view-pager">


<!-- view pager content -->

</div>

<script>
let viewPager;
zuix.context('my-view-pager', (vp) => viewPager = vp);
</script>

Alternatively the ready callback function can be passed with the z-options attribute:

<div ctrl z-load="@lib/controllers/view-pager"
z-options="vp_options">


<!-- ... -->

</div>
<script>
let viewPager;
vp_options = {
ready: (vp) => viewPager = vp
}
</script>

Other z-options fields:

vp_options = {
autoSlide: true, // default `false`
enablePaging: true, // default `false`
slideInterval: 500, // default `750`
verticalLayout: true, // default `false`
holdTouch: true, // default `false`
passive: false, // default `true`
autoHide: true, // default `false`
startGap: 36 // default '0` (ignore touch on the left side to allow swipe gesture to open side drawer)
}

Examples

Hello World!

Versatile, gestures enabled ViewPager controller made with zuix.

Demos

arrow_left  Previous
 
extension
zKit components v1.1.1
web enhancing bits