I know, I know, I saw the “should I use a carousel” site. While I agree with the sentiment, there are forms of carousels that can work very well. Especially the one with a clear navigation pattern.
How about learning how to build it? It’s super easy. Let me walk you through the process.
1. First, we have to create the very top of the carousel together with the menu. Start with a simple box for the background. You can use search (CMD+F on Macs, CTRL+F on PCs), or just drag & drop it from the library. Next add text, as well as all the necessary details.
2. Time for the content. Add a box, text and drop in some images. Yes, it’s that easy.
3. Now, select all the elements of the content part and turn them into a multistate element from the top of the properties panel. All you have to do is simply add a new state by clicking “+New,” type the state name and press enter. The element will transform into a multistate immediately.
4. Multistate elements allow you to switch content within one element. That’s the foundation of your carousel. The only thing that you need now is a bunch of states. Click on your multistate element and add “states” from the property menu as in the previous step. You need three states, one for each story.
5. Time to add some content to your new states. Double click on your multistate element to enter the edit mode and choose “Story 2” to change it. You can update the image, text and anything that you need to make it great. Repeat this step for “Story 3” as well.
Remember to copy the elements (images, text files, buttons etc.) you want to paste into the multistate before you enter the edit mode.
6. Now we’re going to make your carousel interactive. Start with the “Story 2” in the navigation. On click you’ll want to change the state of your multistate element, as well as move the thick line to indicate active state of the navigation. Start with the first task.
Select “set state” of your multistate elements to “Story 2” and do it with a “Slide right” animation (for a more smooth transition select Ease in out & Sine in easing options).
And we’re done. Open the preview and be proud of yourself. You just built an interactive prototype of a carousel. You can test how it works here.