Point: What is a carousel?
A carousel is a feature that displays items containing multiple elements—such as images and text—by sliding through them one at a time. In Studio.Design, the carousel feature is built on the List feature, which lets you manage boxes with the same layout together. Depending on the data source you connect, a carousel can work either statically or dynamically.
For more on the differences between the two, see the Carousel article.
Carousels connected to Studio CMS
When you connect Studio CMS to a carousel, you can display your CMS content in a slider format. The carousel becomes a dynamic element, so you can filter and sort the content that appears, and change how many items are shown.
This is a great fit for content that's updated often—like article lists or product sliders—or when you want to reuse the same content data across multiple pages.
Point: What is Studio CMS?
Studio CMS is a content management system (CMS) feature that lets you structure, manage, and update content directly in Studio.Design. By combining models, items, and properties, you can manage frequently updated content—such as blogs and news—all in one place.
To learn how Studio CMS works and how to get started, see these articles:
Add a carousel that's already connected to Studio CMS
Once your data is set up in Studio CMS, you can add a carousel box that's already connected to it.
Properties such as the title, body text, and images are displayed by default.
1. Before you start: Prepare your Studio CMS content
Before creating a CMS carousel, create the content you want to display in Studio CMS.
Create Studio CMS content in the CMS Dashboard.
Be sure to choose the Article type for your CMS model.
Point: Carousels and CMS properties
The information you can display in a carousel is based on the CMS properties defined in your CMS model.
That means you'll need to set up properties for everything you want in the carousel—such as titles, body text, images, categories, button labels, and badge flags.
2. Add a carousel
In the left navigation of the Design Editor, click [Connect]
.
On the [CMS] tab, select the [Carousel] linked to the CMS model you created in step 1, and place it on the screen.
Connect Studio CMS to a carousel
You can connect Studio CMS to a carousel you've already placed. Once connected, the carousel becomes a dynamic carousel.
Select the carousel. You'll know it's selected when the whole thing is highlighted in light blue and the [Carousel] tab appears in the right panel.
Open the [Data] tab in the right panel. If the panel is closed, open the right panel first.
Click [Connect data] at the top of the property table, then choose the CMS model or CMS collection you want to connect from the dropdown menu.
Change the data source connected to a carousel
Follow these steps to change the data connected to a carousel. Changing the data source won't affect the carousel's layout or design.
Select the carousel. You'll know it's selected when the whole thing is highlighted in light blue and the [Carousel] tab appears in the right panel.
Open the [Data] tab in the right panel. If the panel is closed, open the right panel first.
Click the connected data name (shown in blue) under [List], then select the data source you want to switch to.
Add more properties to display
If you want to show additional properties in your carousel, you'll need to make changes in both the CMS Dashboard and the Design Editor.
First add the property in the CMS Dashboard, then link it to a box inside the carousel.
1. Add a CMS property in the CMS Dashboard
Select the CMS model or CMS collection connected to your carousel, and open the item list.
Scroll the list all the way to the right, click [+] to add a property, then fill in the value for each item.
For detailed steps, see CMS properties.
2. Link boxes to properties in the Design Editor
Select the box you want to link a property to.
If you need to add a box, add one that matches the type of property.
Open the right panel, go to the tab that matches the property type, and link it.
Point: For details on how to link boxes to different types of CMS properties, see Link properties to boxes in a dynamic list or carousel.
Filter and set display options for items
When you link properties from outside the Design Editor—such as Studio CMS—your carousel becomes a dynamic element, and you can edit which items it displays.
Note: If you've connected a CMS collection, you won't be able to edit these settings:
Filter
Sort
Select the carousel. You'll know it's selected when the whole thing is highlighted in light blue and the [Carousel] tab appears in the right panel.
Open the [Data] tab in the right panel. If the panel is closed, open the right panel first.
Adjust each setting.
If your site is already live, update your site from the publish panel after making changes. Your changes won't appear on the live site until you do.
Filter
Set filter conditions based on the CMS properties you've created to narrow down which items appear in the carousel.
For setup instructions and more details, see Filter: Narrow down the items shown in a CMS list.
Sort
You can change the order in which CMS items appear, based on their CMS properties.
For details, see CMS list > Sort items in a CMS list.
Number of items
You can set the maximum number of items to display.
For details, see Dynamic list > Number of items.
Note: When you have fewer items than the number set to display
If the carousel has fewer items registered than the number you've set to display, the same items will repeat. This is expected behavior.
To fix this, try one of the following:
Set the number of items to display to be equal to or less than the number of registered items
Add more items so you have at least as many as the number you're displaying
Use a CMS list instead of a carousel
Edit a carousel's appearance and layout
For detailed steps and things to keep in mind when editing a carousel's appearance and layout, see the articles below.
Tips: Layouts using conditional properties
You can use conditional properties like Color, Number, and Boolean to change the layout—colors, visibility, and more—for each individual item.
For example, you can:
Show or hide a "New" badge
Change button or background colors item by item
You set up this display logic by combining these properties with Studio CMS display conditions.
For details and examples, see the help articles in Studio CMS properties and display conditions.
Set up autoplay for a carousel
You can set your carousel to play automatically.
For setup instructions and more details, see Autoplay a carousel.