View Pager

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

Usage

1. Import view-pager module

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

2. Add component to the page

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

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@1.1.13/js/zuix.min.js"></script>

2. Load the view pager

Add the ctrl z-load attributes to the host element:

<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

Hello World!

Versatile, gestures enabled ViewPager controller made with zuix.

Demos

arrow_left  Previous
Next arrow_right 
Support this work
extension
zKit components v1.2.1
web enhancing bits