DEV Community

Cover image for Adding a ViewPager to your web app

Posted on • Updated on • Originally published at

Adding a ViewPager to your web app

Though the topic covered on this post might still be actual, this content referrers to an older version of zuix.js library. See zuix.js website for up-to-date documentation.

What is a ViewPager?

As described in Android Developers documentation, a ViewPager is a

Layout manager that allows the user to flip left and right through pages of data.


Include zuix.js in the head section of the page:

<script src=""></script>
Enter fullscreen mode Exit fullscreen mode

Add the ViewPager as described below:

<div data-ui-load="@lib/controllers/view_pager"
  <div><!-- Add page 1 content here --></div>
  <div><!-- Add page 2 content here --></div>
  <div><!-- Add page 3 content here --></div>
  <!-- etc.. -->
Enter fullscreen mode Exit fullscreen mode

Example application

The example app design was initially inspired to Twitter mobile but it can be used and adapted as a starting base for different kind of projects.

Web App 4-1

Design summary:

  • responsive
  • main view_pager to switch between content sections
  • side drawer with options menu that can be open by tapping the user avatar
  • collapsing header/footer when scrolling up, expanding when scrolling down
  • page indicator with section names (it's just another view_pager)

Fully playable source on Glitch:

I recommend trying this example also full screen with the direct link


The app consists of a main index and the following elements:

// a small component implementing a 'card'
// with a picture and random data


// a static list used in each ViewPager page and
// that holds a bunch of lazy-loaded 'random_item'


// the menu used in the side `drawer_layout'


// the header bar with a title, clickable
// user profile avatar and sections names


// a footer bar with links to main app screens


// the main app files

Enter fullscreen mode Exit fullscreen mode

So, the index.html page includes:

  • layout/header
  • layout/footer
  • the drawer_layout which content is loaded from content/user_menu
  • a view_pager to implement the page indicator (tab layout) with the section names (Feed, Week, Month, etc..)
  • main view_pager which holds the pages of each section that contain the fake_list populated with random_items

I hope this make sense =) and that the code is easy to understand even for a beginner. If not, feel free to leave a comment, I'll do my best to improve this.

Further reading:

Read next:

Top comments (0)