In this guide, we will create an Instagram-like sliding photo gallery in Sketch.
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!
Get Started with Anima!