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.

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.

• 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.

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>
<script>
var viewPager;
zuix.context('my-view-pager', function(){
  viewPager = this;
});
</script>

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>
<script>
var viewPager;
vp_options = {
  ready: function(ctx) {
    viewPager = this;
  }
}
</script>

Other option fields

var 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`
}

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>
<script>
var vp_options = {
  on: {
    'page:change': function (e, pageInfo) {
      // ...
    },
    'page:tap': function (e, pageNumber) {
        // ...
    }
  }
}
</script>

Try yourself the ViewPager controller live on Glitch.