Fastr Workspace - Building a Carousel

Overview

In Workspace, you can add multiple boards to a single experience in order to create a carousel-style effect. This is also used when creating a Fastr publication, as each page is placed on a board. This article will go over the process for creating a fully functioning carousel in Workspace. The following example page can be used to review different carousel style examples: 

Carousel Examples

You can see below how these examples can be created by having multiple boards that are placed on the same canvas. For general information about the board widget, please review this article on the basic widget types: Fastr Workspace - Widget Types

Creating a carousel

As mentioned above, you are required to have multiple boards in order to make sure your carousel functions as intended. Typically, the easiest process is to duplicate your first board in order to ensure that your dimensions are the same. Please note that the order of your boards in the left panel is important. The board that is listed at the top of this list will be the first one to render when you preview or publish the content: 

Once you have multiple Boards (Scenes) in your Experience, you can then link them together using the Interact options found in the top right corner. Typically, you will want to add an action to an arrow or another button that will let you move from your first board to the next one. You can see in the following screenshot that the "Change Scene" action is being used to navigate to the Next board. You are also able to add a slide direction in order to animate the transition between boards: 

 

Alternatively, you could set the "Scene" option to go to the Previous board as well. This allows you to create a right arrow that will navigate in one direction, and a left arrow that will navigate in the other. 
For general information on how to use the Interactions panel to make elements clickable, please review the following article: Fastr Workspace - Interactions Overview

Using the Foreground and Background

After adding arrows to make your carousel interactive, you will notice that this only works on the first board. The next step is moving your arrows to the Foreground, which will ensure that they appear on every single board in the same location. This makes it easy to add an arrow and only need to perform the setup a single time. 

To use the Foreground, simply right-click on your arrows and select the "Move to Foreground" option as shown here: 

After moving these elements, you can find the Foreground and Background layers at the bottom left corner of your screen. This can be seen in the screenshot below. For more information about the Foreground and Background layers, the following article can be reviewed: Fastr Workspace - Foreground + Background Layers

How to Make Carousels Move Automatically

Follow these steps to set up automatic carousel transitions using a delay:

1. Select the board
2. Set the Trigger
   In the interactions panel, set the trigger to “Enter Viewport.”
   This ensures the animation starts when the carousel becomes visible on screen.
3. Add a Delay Action
   Click the “+” (Add Action) button and choose “Delay.”
   Set the delay duration based on how long you want each slide to remain visible.
4. Add the “Change Scene” Action
   After the delay, add another action and select “Change Scene.”
   Configure it according to how you want the carousel to transition between scenes.

You need to set this interaction for each board. Once configured, the carousel will automatically transition between scenes after the specified delay.

Carousel FAQs

1. Can I embed my carousel inside of a different experience?
   • Answer: Yes, embedding your carousel in a different experience is a common use case that you can use. After publishing your carousel, you can copy the embed code for the carousel and make use of the HTML widget. More information about the HTML widget can be found here: Fastr Workspace - Widget Types
2. Can I create a smooth scrolling carousel?
   • Answer: Yes, you can create a smooth scroll carousel in Workspace. You can review an example for how this would appear here: Example Experience
     
     For more information about creating a smooth scroll carousel, please contact support.
3. Is there a limit to how many boards I can have in my carousel?
   • Answer: No, you can create a carousel with as many boards as you would like. 

Have any questions about this article? Email support@getfastr.com