View Pager

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

Usage

<script type="module">
  import "https://zuixjs.github.io/zkit/lib/1.2/controllers/view-pager.module.js";
</script>

<view-pager z-context="my-view-pager">

  <!-- Content pages of this ViewPager -->

  <div>Page 1</div>

  <div>Page 2</div>

  <div>Page 3</div>

</view-pager>

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

<div ctrl z-load="https://zuixjs.github.io/zkit/lib/1.2/controllers/view-pager"
     z-context="my-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

• z-context="<context_id>" optional
  identifier name to be used to access this component from JavaScript.
• :on:<event_name>="<handler>" optional
  set handler function for event <event_name>
• :vertical-layout optional
  layouts elements vertically. The default value is false.
• :paging optional
  after scrolling, automatically select and focus the closest element centering it in the view. The default value is false.
• :auto-slide optional
  slide-show mode (cycle elements). The default value is false.
• :slide-interval optional
  interval between each slide (milliseconds). The default value is 750.
• :passive optional
  use passive mode for best performance or disable passive mode to prevent default scrolling. The default value is true.
• :hold-touch optional prevent touch events from being propagated to other elements off the view. The default value is false.
• :auto-hide optional experimental
  set page visibility to hidden when off view. The default value is false.
• :start-gap optional

Events

• page:change - occurs when the page is changed
  The second argument of the callback is an object containing the fields in (the new page number) and out (the old page number):
  {in: <current_page>, out: <old_page>}
• page:tap - occurs when a page is tapped
  The second argument of the callback is the tapped page number.

Scripting

Get a reference to the component instance:

zuix.context('my-view-pager', (vp) => {
  // store a global reference for later use
  self.viewPager = vp;
});

Examples

Horizontal layout

Hello World!

Versatile, gestures enabled ViewPager controller made with zuix.

Vertical layout

Demos

• News Blog starter template
• News Reader PWA demo
• Media Browser component