In this guide, we will create an Instagram-like sliding photo gallery.
There are many ways to achieve this, but here are the basics.
Step 1 : Setup Images
Set images horizontally, group them, and place them inside the Phone Mockup folder.
Step 2: Create mask to display one image at a time
- Create a Rectangle the same size of the carousel you want to create
- Place it under the Images Group you just created
- With the Rectangle layer and Images folder selected, click “Mask” in the toolbar
Step 3: Add Controls
- These controls will trigger the interaction and change the images to the right or left.
- Place these controls on top of the Images folder.
Step 4: Select Phone Mockup folder and open it in the Interaction editor.
Step 5: Create a State for each image
In the Editor, place an image on every state by sliding the Image group to the left.
Step 6: Connect Images
Connect the control arrows to the previous or next image/state.
- Click Run Component on the Editor’s toolbar to preview interactions.
- Back in Sketch, click Preview in Browser to Sync and Share your design with the world!