How to build a carousel in MockingBot

An ongoing series of MockingBot tutorials

Carousel is such a common element in web and app design. Let’s see now how to build one quickly in MockingBot.

Step 1

Create a new master template.(In this example, set the template size to be consistent with the size of the device)

Step 2

In the master editing area, add one image widget to State 1. Copy the state to three screens. Upload image for each screen.

Step 3

Connect screen 1, 2 and 3 by setting “timer” as the gesture, and “right slide” as the transition effect, with a 2-second pause interval.

Step 4

After saving successfully, return to the workspace.

Step 5

Drag the master template into your project, click “Launch” to preview the carousel.