Point: What is a carousel?
A carousel is a feature that lets you display multiple pieces of content in a sliding sequence. Studio.Design offers two types: a static List Carousel, and a dynamic CMS Carousel that uses content from Studio CMS.
For an overview of carousels and how the two types differ, see the Carousel article.
Add a List Carousel
To add a carousel that uses the List feature, use the dedicated part.
The dedicated part comes preloaded with sample data, so you can simply replace the items with your own.
In the navigation on the left side of the editor, click the Add icon
.From the [Interactions] menu at the bottom of the Add panel, drag and drop [Carousel] onto the screen, or click it to add it.
Tips: Adding a carousel from the Parts tab
You can also add a carousel part from the [Carousel] menu at the bottom of the [Parts] tab in the Add panel.
The carousel part doesn't come with sample image data.
Edit carousel item fields (properties)
You can edit the text, images, and other fields within carousel items as properties on the [Data] tab of the right panel.
Select the carousel.
If selected correctly, the [Carousel] tab appears in the right panel.
Select the [Data] tab in the right panel.
If the panel isn't visible, open the right panel.
Edit the desired property in the list on the Data panel.
For details on how to edit, see Creating and managing lists.
Add a property
Follow the steps below to add a new property.
Select the carousel.
If selected correctly, the [Carousel] tab appears in the right panel.
Select the [Data] tab in the right panel.
If the right panel isn't visible, open the right panel.
Scroll the list to the right edge and click [+].
Choose a property type.
Enter a value for the property.
Set up autoplay for a List Carousel
You can set carousels to play automatically.
For details on how to set this up, see Autoplay a carousel.
Edit carousel items
Carousel items share the same layout and styles.
For example, if you change the text size in one item, the same change applies to all other items.
How to edit
Double-click a carousel item to enter edit mode.
Make your edits.
To edit design elements like appearance, position, and color, use the [Box] tab in the right panel.
To add items, use the table on the [Data] tab.
*Even if you reduce the size of items inside the carousel, a maximum of 7 items can be displayed on screen at the same time.
Use cases
Show a "New" badge only on specific items
Use different button colors for each item
Display order and centered layout
In a carousel, the item at the top of the table on the [Data] tab is displayed in the center.
So if you want items to appear in order starting from the left, you'll need to reorder the items as shown in the image.
