Using the ScrollView widget to navigate through a collection of pictures

A ScrollView widget is used in picture galleries or carousel-like applications, where you would like to scroll to the next page to see the next picture in the gallery. The widget allows you to move to the next page or the previous page by swiping from right to left or left to right.

How to do it…

Let's create a view that contains a ScrollView widget:

<div 
  data-role="view"
  data-title="Gallery"
  data-layout="defaultLayout">
  
  <div 
    data-role="scrollview">

  </div>
</div>

Here, a ScrollView widget is created inside the view by setting the data-role attribute to scrollview. The ScrollView widget now needs to contain pages that can be scrolled through by swiping from right to left or left to right. To create a page, add div elements inside the ScrollView container, and set the data-role attribute to page. Each page widget can then contain an image that needs to be shown:

<div
  data-role...