Point: What is a carousel?
A carousel is a feature that displays multiple pieces of content in a slide format, one after another. Studio.Design offers two types of carousels: the static List Carousel and the dynamic CMS Carousel, which uses content from Studio.Design CMS.
For an overview of carousels and the differences between each type, see the Carousel article.
Carousels that use Studio.Design CMS content
A CMS Carousel displays content data from Studio.Design CMS in a slider format.
Data managed in the CMS Dashboard is reflected in the carousel and can be shared with other CMS Lists and Dynamic Pages.
This works well for frequently updated content like article lists or product sliders, or whenever you want to share the same content data across multiple pages.
Point: What is Studio CMS?
Studio.Design CMS is a Content Management System (CMS) feature that lets you structure, manage, and update content within Studio.Design. By combining models, items, and properties, you can centrally manage content that updates often, such as blog posts and news articles.
For more about how Studio.Design CMS works and the basics of using it, see the following articles:
Add a CMS Carousel
To use a CMS Carousel, place a preset CMS Carousel box on your screen.
The carousel box you place is already linked to a CMS Model and displays properties like title, body, and image by default.
1. Preparation: Set up content data in Studio.Design CMS
Before creating a CMS Carousel, create the content you want to display in the carousel using Studio.Design CMS.
Studio.Design CMS content is created in the CMS Dashboard.
Choose the Article type for your CMS Model.
Point: CMS Carousels and CMS Properties
The information that can be shown in a CMS Carousel is based on the CMS Properties defined in your CMS Model.
For this reason, you'll need to design properties for any elements you want in your carousel, such as title, body, image, category, button label, and badge flags.
2. Add a CMS Carousel
In the left navigation of the Design Editor, click the Connect icon
.From the [CMS] tab, select the [Carousel] linked to the CMS Model you created in step 1, and place it on your screen.
Add information (properties) to display in a CMS Carousel
If you want to add more information to display in your carousel, follow these steps:
Add a property to the CMS Model in the CMS Dashboard.
In the Design Editor, link the property to the carousel layout.
1. Add a property to the CMS Model in the CMS Dashboard
Open the CMS Dashboard.
Select the CMS Model linked to your carousel and open the item list view for that model.
Scroll the list all the way to the right and add a property using the [+] button.
For more details, see CMS Properties.
2. Link the property to the carousel layout in the Design Editor
Open the Design Editor.
Select the CMS Carousel box.
Open the [Data] tab in the right panel.
*If the panel is closed, open the right panel.
Drag the blue "・" at the start of the property you just added, and use the connector to link it to a box element.
Edit the content displayed in a CMS Carousel
Change the information (properties) displayed in a CMS Carousel
To change information shown in the carousel — like the title, body, image, category, button label, or badge flag — you'll need to edit the CMS Property content.
Open the CMS Dashboard.
Edit the content of the relevant CMS Property.
For details on what you can edit and how, see CMS Items.
Change the CMS Model linked to a CMS Carousel
You can change the CMS Model linked to your carousel using the steps below. Changing the model doesn't affect the carousel's design.
Select the CMS Carousel you want to update.
Open the [Data] tab in the right panel.
If the panel is closed, open the right panel.
Click the linked data shown (in blue) on the right of the list to change the linked data.
Configure display settings for CMS Carousel items
Basic display settings
Select the dynamic list you want to configure.
Make sure to select the list itself, not an item inside the list.
(When selecting from the Layers panel, choose the layer with the list icon
.)Open the [Data] tab in the right panel.
If the panel is closed, open the right panel.
Configure each setting.
If your site is already published, update your site from the Publish panel after configuring settings. Changes won't appear on your live site until you do this.
Filter
You can set filter conditions based on pre-configured CMS Properties to narrow down the items shown in your list.
Note: Filtering is only available when the data linked to your CMS Carousel is a CMS Model. It can't be used with CMS Collections.
For setup details, see Filter: Narrow down items shown in a CMS List.
Number of items shown
You can set the maximum number of items shown in the list. The maximum is 50 items.
Note that up to 7 items can be shown on the same screen at one time.
Editing the design of CMS Carousel items
All items inside a carousel box share the same layout and styling.
For example, if you change the text size on one item, the change applies to all the other items as well.
How to edit
Put the list item into edit mode.
Double-click the carousel list, or select a list item in the Layers panel.
Add boxes or edit the design, such as size and color.
For information on setting layout and appearance, see the following help articles:
Set up autoplay for a CMS Carousel
You can enable autoplay for carousels.
For setup details, see Autoplay a carousel.