Directory

← Back

sliding-pages

� A polymer 2.0 element designed for page transitions in a carousel style

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/alex-saunders/sliding-pages on 2019-05-10 ]

Published on webcomponents.org

<sliding-pages>

DEMO

<sliding-pages> is a simple carousel style element for moving between pages. The transitions are based on native app transitions and are implemented using the FLIP animation technique for optimal performance. Page transitions can be actived by either swiping left or right or by chaing the active-index property.

Usage

sliding-pages looks for and defines pages as immediate div children and forms an array using these, which the property active-index is based on. Nested children of these divs will be ignored. The following HTML implements the <sliding-pages> element:

<sliding-pages active-index="1">
  <div>
    <h1>
      Page 1
    </h1>
    <div>
      Child div
    </div>
  </div>
  <div>
    <h1>
      Page 2
    </h1>
  </div>
  <div>
    <h1>
      Page 3
    </h1>
  </div>
</sliding-pages>

With the corresponding JS:

<script>
const pages = document.querySelector('sliding-pages');

function prevPage() {
  const currIndex = parseInt(pages.getAttribute('active-index'));
  pages.setAttribute('active-index', (currIndex - 1));
}
function nextPage() {
  const currIndex = parseInt(pages.getAttribute('active-index'));
  pages.setAttribute('active-index', (currIndex + 1))
}
</script>

Example

API Reference

Properties

Property Type Description
active-index Number The index of the current active page (note, this is 0-based)

Methods

<sliding-pages> has no public methods as it's behaviour is purely defined by the active-index property. I.e. to go to the next page, increment active-index and to go to the previous page, decrement. This property is both observed and reflects to attribute i.e. one can manually change the active-index property to trigger a page change or if the page is swiped left or right, the active-index property will update to display this.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Polymer/polymer#^2.0.0-rc.2

Released
2017-05-02
Maturity
TESTED
License
Other

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

sliding-pages - Vaadin Add-on Directory

� A polymer 2.0 element designed for page transitions in a carousel style sliding-pages - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/alex-saunders/sliding-pages](https://github.com//alex-saunders/sliding-pages/blob/v0.0.3/README.md) on 2019-05-10 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/alex-saunders/sliding-pages) # \ [DEMO](https://alex-saunders.github.io/sliding-pages/components/sliding-pages/demo/) `` is a simple carousel style element for moving between pages. The transitions are based on native app transitions and are implemented using the [FLIP](https://aerotwist.com/blog/flip-your-animations/) animation technique for optimal performance. Page transitions can be actived by either swiping left or right or by chaing the `active-index` property. ## Usage `sliding-pages` looks for and defines pages as immediate div children and forms an array using these, which the property `active-index` is based on. Nested children of these divs will be ignored. The following HTML implements the `` element: ```html

Page 1

Child div

Page 2

Page 3

``` With the corresponding JS: ```html ``` ![Example](https://media.giphy.com/media/xUA7aSwpe54mpHHzIk/giphy.gif) ## API Reference ### Properties | Property | Type | Description | | ----------------- | -------- | --------------------------------------------------------------- | | **active-index** | *Number* | The index of the current active page (*note, this is 0-based)* | ### Methods `` has no public methods as it's behaviour is purely defined by the `active-index` property. I.e. to go to the next page, increment active-index and to go to the previous page, decrement. This property is both observed and reflects to attribute i.e. one can manually change the active-index property to trigger a page change or if the page is swiped left or right, the active-index property will update to display this.
Online