Carousel overview
A carousel is a feature that displays multiple items — such as images and text — in a sliding format, cycling through them one at a time. It's ideal for showcasing multiple pieces of content within a limited space, and is sometimes referred to as a slider or slideshow.
Studio.Design offers two types of carousels: List Carousel, which uses static list data, and CMS Carousel, which uses dynamic lists powered by Studio CMS data.
Both are placed as carousel parts, and their behavior can be adjusted through box settings and data settings.
Note: Infinite loop playback is not supported. For more details, see Can I use infinite loop playback with the carousel autoplay feature?
Basic carousel structure
Carousel design
Carousels in Studio.Design are built on the List feature.
A carousel consists of a carousel box that wraps the entire component, carousel items arranged inside it, and properties (fields) within each item.
When you change the layout or style of one item, the same changes are automatically applied to all other items in the same carousel.
Item properties displayed in a carousel
Content shown inside carousel items — such as titles, body text, images, categories, and button labels — are managed as properties, separate from the carousel's design.
For List Carousels, properties are set in the [Data] tab of the right panel in the Design Editor. For CMS Carousels, they're managed in the CMS Dashboard.
Tips: Make use of conditional properties
By using properties like Color, Number, and Boolean, you can vary the style of each individual item.
For example, you can:
Toggle the visibility of a "New" badge using a Boolean property
Change button colors per item using Number or Color properties
Set different background or button colors for each item
Display logic is controlled by combining CMS condition settings with list property settings.
List Carousel vs. CMS Carousel
Carousel type | Where data is managed | Use case |
Small, fixed content (campaign banners, static service introductions, etc.) | ||
Articles, products, or other content that's frequently updated and large in volume |
What is a List Carousel?
A List Carousel uses list property data within the Design Editor. It's best suited for displaying static data or a small amount of content that's managed entirely within the editor.
For details on how to add one, see the List Carousel article.
What is a CMS Carousel?
A CMS Carousel uses CMS property data managed in Studio CMS. It's ideal for displaying frequently updated content like articles or product information in a carousel format.
For details on how to add one, see the CMS Carousel article.
Editing carousel items
Carousel items share the same layout and styles.
For example, if you change the text size in one item, the same change is applied to all other items in the carousel.
Switching a carousel item to edit mode
To edit an item inside a carousel, you need to activate it and make it editable.
You can enter edit mode for a carousel item using either of the following methods:
Double-click on the carousel item
Select the carousel item from the Layers panel
Once a carousel item is in edit mode, its properties and blue dots (connector starting points) will appear in the [Data] tab of the right panel.
The image below shows an example of the Data tab when a carousel item is active in a CMS list.
Carousel autoplay
Carousels include an autoplay feature that automatically cycles through slides.
With autoplay, you can adjust settings like playback interval, transition duration, and pause on hover to control the timing and speed of slide transitions.
For setup instructions and more details, see Autoplay a carousel.
Note: Autoplay and accessibility
Autoplay and pause-on-hover behavior can affect the browsing experience of screen reader users and people who primarily navigate with a keyboard.
Consider providing alternative navigation paths or text links so that important information and actions aren't only accessible through the carousel.
Display count and sort order
Number of carousel items displayed
A carousel can contain up to 50 items.
A carousel can display up to 7 items at once on the same screen.
Carousel item sort order
The order of items is controlled from the table in the [Data] tab for List Carousels, and through features like CMS Collections for CMS Carousels.
Display order and center alignment
By design, carousels display the first item in the [Data] tab's table in the center position.
Because of this, if you want items to appear sequentially from the left edge, you'll need to adjust the item order accordingly.
For CMS Carousels, use features like CMS Collections to manage the item order.
Carousel