UX Patterns: Image Slider Control

Image slider is a popular control in web and mobile apps.  In our scenario, let’s imagine that we are introducing new features of an app. For that we will build an image slider with an indicator showing current slide and define an action for each slide. Using swipe gesture, you can navigate for slide to slide or you can hit the “Skip” or “Get Started”  button to go to the home screen.   The end result would look like this:

 

Preparation

Add images that will be displayed in each slides. (Note: You can also skip this step and provide image urls when defining your data source)

 

Implementation

We start by defining the data that represent each slide. We will do it inline here but this can also be fed from a custom API or some other connector.

UpdateContext({items:[{index:0,title:"If you see a heart icon, tap it to save as a favorite",image:Slide1,action:{name:"Skip",screen:HomeScreen}},{index:1,title:"Get important alerts at the top of your feed",image:Slide2,action:{name:"Skip",screen:HomeScreen}},{index:2,title:"Schedule time off and send your colleagues a calendar notification",image:Slide3,action:{name:"Get Started",screen:HomeScreen}}]})

The structure and names used here is arbitrary. If you are free to define the structure that fits your need. In the example above, I have a collection “items” with 3 items representing each slide. In each item, I define a title, an image and an action. The action will be used to wire up the “Skip” and “Get Started” buttons.

Let’s add a custom gallery with horizontal layout:

We add an image, a button and a textbox to the gallery template. Each of these elements will be bind to different properties :

 

 

 

We set few properties as follow:

 

We set the Items property of the gallery to items collection we defined earlier.

 

now, let’s focus on the indicator. For that, we create another horizontal gallery and we bind its Items property to the same items collection we defined earlier. We insert a circle (found under Icons) within the template gallery. At this point, you should see 3 dots. You will have to adjust the gallery TemplateSize (~28 or so) property to bring those circles closer together.

In order to synchronize the indicator with the gallery, we use the Default property as follow:

Default = LookUp(items,Value.index =introGallery.VisibleIndex-1) . This will in effect force the selected state of the indicator to match the slider gallery (named introGallery in this sample).

 

Finally, we style the little circle element used inside the gallery template as follow:

Check out the sample here

 

Bonus Exercise: You can add a timer to this control to automatically slide between images after some elapsed time.