By Matte Rae
F
rom holiday rental listing sites, to online marketplaces or portfolios, the use of imagery in web and mobile design is prevalent across a variety of experiences. Images can provide valuable information to consumers and add inspiration to a website.
In this guide, learn how to create sliders and carousels using components and states in Adobe XD. To follow along, download the starter file and open it in Adobe XD.
What is a slider or carousel?
Sliders and carousels can take several forms and depending on the aesthetic of the website or app, will look and behave differently in each implementation. However, at the core, it is typically a horizontal gallery of images or banners that can either be clicked or scrolled through, or automatically advanced like a slideshow with a time delay.
These are common on hero banners of product websites, video and tv streaming platforms and image galleries and are used to rotate through a few key features of content while not overwhelming a user with too much at once. If you’ve ever shopped online for clothing or other products you’ve likely interacted with a slider or carousel of product imagery. Read on to learn how to create a carousel and design an image slider.
Creating a simple slider
A basic slider consists of at least 2-3 images that move right to left across the screen either via a time delay or the click of an arrow. Often these sliders will include an indicator of which image or slide it is currently displaying.
Using a time-delay
To create a slider using time-delay or automatic advancement, multiple artboards will be used to create the effect. Start by creating one artboard, either by manually drawing it with the artboard tool or using a preset in Adobe XD.
Next, draw out the shape for the main image. This can be positioned however you please to fit your image slider design, but for the purpose of this tutorial, draw out a 16:9 rectangle and have it fill about 80% of the width of the page.
Using the copy and paste function or by holding option on Mac (alt on Windows) and clicking and dragging the original rectangle, make two copies of the rectangle, placing them to the right, with about 10px of spacing between each. Select all three and create a group to ensure that they remain together when off-canvas.
At this point, images or other content can be added to the containers to complete the design. To keep things simple, this tutorial will use colour to distinguish between the three slides, but the principles remain the same. If you’re adding additional content, make sure that you group it accordingly and ensure the group names are consistent across the artboards.
With the three rectangles created and positioned, copy the artboard twice so that there are now three identical artboards on the canvas. On the second artboard, position the slide group so that the middle slide is centred in the middle of the view. This can be done by selecting the group and clicking the Centre alignment button at the top of the property inspector.
On the third artboard, position the third slide in the centre of the screen. To do this, simply drag the group, while holding shift, until the rectangle is centred on the page. Set a guide before positioning to ensure proper alignment.
Connect the screens
With the design complete, toggle to Prototype mode using the tabs at the top or the hotkey (Option+2 on Mac or Alt+2 on Windows).
Selecting the first artboard, click and drag the blue arrow to Artboard 2. In the property inspector, select Time as the trigger and use Auto-Animate as the action. Repeat the process from Artboard 2 to Artboard 3.
This configuration, with a 0s time delay will make the slides transition very quickly once the animation is complete. To make the animation more readable and less overwhelming, apply a 2-4s delay under the time trigger settings, for both the animations.
When this prototype plays, it will now automatically transition between the slides, from 1 to 3.
However, you may notice it now stops at number 3 and does not repeat. To address this, first, a prototype link can be applied to Artboard 3, linking back to Artboard 1. This will now rewind the slider back to the start so it can begin its process once again.
Click to progress
The other approach to a slider is using manual interaction like a click to progress the sliders. To do this, having visible arrows above the sliders will be helpful in indicating that user interaction is possible.
The design set-up for this approach is the same as it is for the time animated approach. Create 3 artboards, with the sliders repositioned for each transition. The key difference here is the trigger used for the prototyping of the interaction.
With the artboards set-up and the sliders positioned appropriately, the first step will be to create the trigger area for the tap. You could set a tap on the entire artboard to create the transition, but to add fidelity to the interaction, it is best to create a target area, like an arrow, to trigger the animation.
Start by drawing a rectangle on the right side of the slide in Artboard 1. Give this a gradient that goes from non-transparent to transparent, starting from the outer edge. Use an icon plugin or a vector icon like Streamline Icons, to add in a chevron or arrow pointing to the right.
Group all of these new elements into a group and call it Next -- or something indicative of its purpose. Copy that group and apply a vertical flip to it and then position it to the left of the slide. You can choose to leave this option available (allowing backwards navigation of the slider) or turn the opacity down to hide it.
Next, copy and paste the arrow groups to the other artboards. In Adobe XD, pasting elements in the same position on multiple artboards is as simple as selecting all the artboards and clicking paste - elements will then be pasted in the precise same location as the original artboard.
Now, in Prototype mode, select the right arrow group on Artboard 1 and connect it to Artboard 2. Set the trigger to Tap so that clicking the arrow group will trigger the transition. Once again, make sure the action is Auto-Animate.
Repeat this step with the right arrow on Artboard 2. The reverse can also be created using the left arrows to go back to the beginning of the slider.
Creating a carousel slider
A carousel is a specific type of slider, which simply displays multiple images in each stage of the slide. This could be something that shows 4 images and progresses forward one image at a time when an arrow is clicked or time progresses.
The approach for the image carousel design is the same, using multiple artboards and displaying the desired content in each artboard. Auto-Animate will handle transitioning between the content.
Creating a slider component
If you’re using the Tap trigger to progress the slider, it can actually be created using component states and built within a single artboard. Using a component for your slider will make it and the mechanics, reusable across the design.
The process begins in the same way, with just Artboard 1 and three rectangles. This time, once the rectangles are grouped, create a component, either with the right click menu or the hotkey (CMD+ K on Mac, CTRL+ K on Windows).
Now, in the component menu in the top right, click the + next to Default State. Name the new state Slide 2. With this new state selected, reposition the group so the second slide is centred.
Once that state is set, click the + again and create Slide 3, positioning the third slide in the centre of the artboard this time. You should now be able to toggle through the states and see the rectangles reposition.
To connect these together in Prototype mode, once again use the arrow approach, but instead of selecting another artboard as the destination, simply click the blue arrow and select the appropriate state from the drop-down on the right. From the first slide, select State 2 and from slide 2 select State 3, etc.
Just like that you have a reusable slider component that can be used throughout your design. Using the drag and drop of components and images, slides can be easily overridden to create unique slides each time.
