CODEWITHSUNDEEP
polymer
gkkirsch
gkkirsch

Reputation: 2116

Polymer swipe left or right to show new page

I am trying to learn polymer by building my own mobile app. Can anyone point me in the right direction on how to create introduction pages like the "What's New" part of the android app "Today Calender" by Jack Underwood. Is there a way to do that with Polymer's built in elements? It's basically 3 pages you can swipe through. The page follows your finger if you release your finger past a certain point it will gently snap to the next page.

Upvotes: 2

Views: 2655

Answers (2)

Thaum Rystra
Thaum Rystra

Reputation: 749

The swipe-pages custom element does exactly this. Swipe to navigate between pages, the pages start moving the moment you drag them horizontally, but only change pages if you drag past a set threshold.

Update:

This package is for Polymer 0.5 and does not yet work on Polymer 1.0

Upvotes: 4

Flying Emu
Flying Emu

Reputation: 430

I made three CodePens while I was learning jQuery, so the code is a bit crude.

The first one works on a loop which allows for infinite scrolling. The second one doesn't work in a loop. The third one uses vertical slides, but you might wish to employ the bubble navigator. How they work is quite intuitive, but if you need any clarification feel free to shout out.

Here are all the CodePens:

  1. Swiping in a loop
  2. Swiping without a loop
  3. Side navigation

Upvotes: 1

Related Questions