Carousel

In this tutorial, you will use States and Interactions to create three different types of carousels:

• Carousel with previous and next buttons
• Carousel with slide dots
• Automatic carousel

→ Download a ready .uxp file for this tutorial.

Setting Up the Design

1. Open a prototype in UXPin and from the left-side Quick tools menu add a rectangle onto the canvas. Then, duplicate it so that you have three rectangles. You can position them horizontally or vertically.
2. Fill each rectangle with an image by clicking Fill with Image in the Properties panel, or click Fill with data in the Top bar.
3. Select all three rectangles and group them using the Ctrl "G" shortcut or from the Top bar.
4. Then, Check the Crop selected content checkbox in the Properties panel and crop it to the slide you want to have as the first one.

5. Click the Add State icon in top Top bar or use the shortcut Ctrl "Shift" "S" . You’ll have State 1 (the Base) already created. Type State 2 for the second state and click Enter.

6. Then click New state to create State 3, set its name and click Enter.

7. Click on State 2, grab all slides, move them all at once and drop so that the second slide is in the light blue frame. Do the same for the third slide in State 3.

Carousel with Next/Previous Buttons

1. Add two icons from the Quick tools menu in State 1 - Base. Go to the Icon section of the Properties panel to turn them into an upward arrow and a downward arrow. Make sure to add them in the base state so that they appear in other states as well.

2. Select the upward arrow, at the top of the Properties panel click + to add a new interaction.

3. In the Action section, click More and choose Previous state.

4. Under Element, choose your Group with slides.

5. Click Add.

6. Now select the downward arrow and add the same interaction, but choose Next state under More in the Action section.

7. Click Add.

8. Preview your carousel.

Carousel with Slide Dots

1. Add three dots using the oval shape from the Quick tools menu to the group with slides in the State 1–Base.

2. Select the first dot and click + in the Properties panel to add a new interaction.

3. In the Action section select Set state.

4. Under Element, select the group with slides.

5. In Set state, select State 1–Base. Click Add.

6. Then, add the same interaction in the two other dots, selecting respectively State 2 and State 3 in the Set state dropdown. Again, these interactions will automatically appear in the two other states.

7. While still in base state, select the two other dots and change their opacity to 25% – this will make them appear as inactive in that state.

8. In State 2 only the second dot should have its opacity set to 80%. In other states, set the opacity depending on which slides these states represent.

9. Preview your prototype.

Automatic Carousel

1. Click anywhere on the canvas to select the page and then click + to add a new interaction in the Properties panel.

2. Select Page is loaded from the Trigger list.

3. In the Action section, in the More dropdown, select Next state.

4. Under Element, select the group with slides.

5. In Animation settings, set Delay to 2000ms. Otherwise the first slide will advance too quickly to the second one without being seen.

6. Click Add.

7. Now, click on the Group with States on the prototype and add a new interaction to it.

8. From the Trigger list, select State changed.

9. In the Action section, in the More dropdown, select Next state.

10. Under Element, select the group with slides.

11. Under the Animations settings, set the Delay to 2000 ms.

12. Click Add.

13. Preview your carousel.

Your carousel will continue to rotate automatically after the first state change. The first change of States will be delayed until two seconds after the previous state has changed. Also, the carousel will go back to the first state after the last has been reached.