ViewPager

extension

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

Usage

Usage

1. Include zUIx library

Add the following line, preferably inside the head section of the HTML document

<script src="//zuixjs.github.io/zuix/js/zuix.min.js"></script>

2. Load the ViewPager

Add the data-ui-load attribute to the div container

Page 1
Page 2
Page 3

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 focus the active element to the center of the view.

Examples

Examples

Horizontal layout

Hello World!

Versatile, gestures enabled ViewPager controller made with zUIx.
attributes of div container
data-o-slide="true"
data-o-paging="true"

Vertical layout

attributes of div container
data-o-layout="vertical"
data-o-passive="false"

The layout of this site itself is also entirely based on the ViewPager.

Options

Options

  • data-ui-load="@lib/controllers/view_pager" constructor
    load the view_pager controller on the element.
  • data-ui-context optional
    identifier name to be used to reference this component from JavaScript.
  • data-ui-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 (experimental) optional
    set page visibility to 'hidden' when off view. The default value is false.
Scripting

Scripting

ViewPager object

A reference to a view_pager object can be obtained trough its context identifier which is assigned by adding the data-ui-context attribute to the ViewPager element and finally by using the zuix.context(...) method.

Since components are loaded asynchronously the zuix.context method may return null if called before the component is ready. So, when not sure if the component is ready, it is more safe to use the callback argument of the zuix.context method.

<div data-ui-context="my-view-pager"
  data-ui-load="@lib/controllers/view_pager">
  
</div>

Another way getting a safe reference to a component is by using the data-ui-options attribute.

<div data-ui-options="vp_options"
  data-ui-load="@lib/controllers/view_pager">
  
</div>

Other option fields

Methods

// select page
viewPager.page(2);
// get element of a page (returns ZxQuery-wrapped element)
const pageFour = viewPager.get(3);
pageFour.find('a').attr('rel', 'no-opener');
// select next page
viewPager.next();
// select previous page
viewPager.prev();
// get auto-slide mode (true/false)
const slideMode = viewPager.slide();
// enable or pause auto-slide mode
viewPager.slide(true);
// get current layout mode ('horizontal' or 'vertical')
const layoutMode = viewPager.layout();
// change current layout mode
viewPager.layout('vertical');

Events

// page change event
viewPager.on('page:change', function(e, pageInfo) {
  // new page number
  console.log(pageInfo.in);
  // old page number
  console.log(pageInfo.out);
  // ...
}).on('page:tap', function(e, pageNumber) {
  console.log(pageNumber);
  // ...
});

To bind events we can also use the data-ui-options attribute.

<div data-ui-options="vp_options"
  data-ui-load="@lib/controllers/view_pager">
    
</div>

Try yourself the ViewPager controller live on Glitch.

About

Source

Source code is available in the lib/controllers folder of zKit repository.

This component is based on zUIx library. Visit zKit home for more components.