About carousels
A carousel displays items—each containing elements like images and text—as slides that switch from one to the next. It's a great fit when you want to show multiple pieces of content in a limited space. Carousels are also known as sliders or slideshows.
In Studio.Design, the carousel feature is built on the List feature, which lets you manage boxes that share the same layout together.
Point: What is a list?
A list lets you manage boxes that share the same layout together.
You can manage data such as text and images in one place. And if you connect a source like Studio CMS, it works as a dynamic list that updates automatically as your content changes.
By default, a list works as a static list.
For an overview of the list feature, see List.
Types of data you can connect to a carousel
By default, a carousel works as a static carousel and displays content from the list properties you link to it. You create and manage list properties in the property table in the Design Editor.
If you connect data from outside the Design Editor, the carousel becomes a dynamic element. You can connect data from Studio CMS, as well as external content data retrieved through an API or RSS feed.
The steps differ depending on the data source you connect, so see the following articles for details.
Connected data | Carousel behavior | Where data is managed | Features | Use cases |
List properties | Static | Design Editor > right panel > Data tab | - | Small amounts of fixed information |
Studio CMS properties, or external properties retrieved through an API or RSS feed | Dynamic | Studio CMS dashboard, or the external service the data comes from |
| Information with many entries and frequent updates, such as articles or products |
Note: If you want to create an infinite loop (marquee) effect with a carousel
Infinite loop playback isn't supported with the carousel feature. (See: Can I loop elements infinitely with the carousel autoplay feature?)
As an alternative, you can use Loop Box to create an infinite loop.
How a carousel is structured
Here's how a carousel is structured and how to edit it.
Carousel design structure
Carousels in Studio.Design are built on the List feature.
A carousel consists of a carousel box that wraps everything, the carousel items lined up inside it, and the properties displayed within each item.
All items in a carousel share the same layout, so when you change the layout or design of one item, the change applies to every other item in that carousel.
1. Carousel box
The carousel box is the parent box that holds the entire carousel, including the carousel items and the playback buttons.
On the screen, it covers the whole area where the carousel items are lined up. In the Layers panel, it's the element at the top level of the carousel.
2. Carousel item
A carousel item is a single slide within the carousel box. In the Layers panel, carousel items sit just below the carousel box, and their layer names are numbered [0], [1], [2], [3], and so on.
3. Boxes that display properties
Link properties from your connected data to the boxes you place inside an item to display their content.
Linking boxes inside an item to properties
Each property appears in the carousel once you link it to a box inside the carousel.
Carousel parts that come with sample properties already have their properties linked to boxes. But if you add a new box or property inside a part, you'll need to link it yourself.
The steps differ depending on the connected data, so see the following articles for details.
Editing the entire carousel
Select the entire carousel
Select the whole carousel—in the Layers panel, for example—and adjust its settings in the right panel.
Select the carousel you want to edit.
The entire carousel is highlighted in light blue.
Open the tab you need in the right panel and edit the settings.
If the panel is closed, open the right panel.
Edit the layout and appearance of the entire carousel
You can set the width and height of the whole list, the direction items are arranged in, and the spacing between items.
Open the Box tab in the right panel and adjust the settings you need. If the panel is closed, open the right panel.
Related article: Arrange list items vertically or horizontally
Edit carousel properties
For a standard carousel, you create and manage data in the property table.
Open the Data tab in the right panel and adjust the settings you need. If the panel is closed, open the right panel.
To learn which property types you can use in a carousel and how to work with the property table, see List properties.
Connect data to a carousel (turn it into a dynamic carousel)
You can turn a carousel into a dynamic carousel by connecting data from a source such as Studio CMS.
Open the Data tab in the right panel and choose the data source you want under Connect data. If the panel is closed, open the right panel.
For detailed steps, see Dynamic carousels connected to Studio CMS > Connect Studio CMS to a carousel.
Editing carousel items
To edit the contents of a carousel item, switch the item into edit mode first.
Note: If every property in the carousel shows the same content
All items in a carousel share the same layout, but as long as properties are linked correctly, the content inside each box (text, images, links, and so on) will differ from item to item based on each property's values.
If text, images, links, or other content unexpectedly show the same content across the whole carousel, see the help article below.
Switch a carousel item into edit mode
To edit the contents of a carousel item or link boxes to properties, first switch the carousel item into an editable state (edit mode).
Select the carousel you want to edit.
The entire carousel is highlighted in light blue.
With the carousel still selected, double-click it or press Enter.
In the Layers panel: Only the elements inside that carousel are shown.
On the screen: The carousel is highlighted, and its items become selectable.
Click the item you want to edit.
In the Layers panel: Only the elements inside that carousel item are shown.
On the screen: The selected carousel item is highlighted.
In the right panel: The Data tab shows the properties along with blue dots (the starting points for connectors).
Tip: You can also edit a carousel item the same way by selecting it in the Layers panel.
Exit carousel item edit mode
Click an empty area above or below the carousel.
Note: If you click to the side of the carousel, you may end up clicking a carousel item that isn't currently visible on the screen.
Edit mode is turned off, and the Layers panel goes back to showing the layers for the entire page.
Edit the layout and appearance of a carousel item
Open the tab you need in the right panel and make your changes. If the panel is closed, open the right panel.
Any changes you make apply to every item in that carousel.
Linking properties to boxes in a carousel
When you link a property to a box inside a carousel item, its text, image, URL link, or other content appears there.
The steps differ depending on the type of data connected to the carousel, so see the following articles for details.
Note: If properties in your carousel items all show the same content
All items in a carousel share the same layout, but as long as properties are linked correctly, the content inside each box (text, images, links, and so on) will differ from item to item based on each property's values.
If text, images, links, or other content unexpectedly show the same content across the same carousel, see the help article below.
Carousel autoplay
Carousels include an autoplay feature that switches slides automatically.
With autoplay, you can control the timing and speed of each transition using settings like the interval, transition duration, and pause on hover.
For setup details, see Autoplay a carousel.
Note: Autoplay and accessibility
Autoplay and pause-on-hover behavior can affect the experience for people using screen readers or navigating mainly with a keyboard.
Try not to rely on a carousel alone for important information or actions—consider adding an alternative path or text link as well.
Number of items and their order
You can set how many items your carousel shows and the order they appear in.
Number of carousel items shown
A carousel can display up to 50 items.
A carousel can show up to 7 items on screen at the same time.
Change the order of carousel items
In a carousel, the item at the top of the table on the Data tab appears in the center. So if you want items to appear in order starting from the left, you'll need to adjust their order.
How you change the order depends on the data connected to your carousel. See the articles below for specific steps.
carousel