Carousel overview
A carousel is a feature that displays items containing multiple elements—such as images and text—by switching between them in a slide format. It's a great way to show several pieces of content in a limited space, and it's also known as a slider or slideshow.
In Studio.Design, you can use two types of carousels: the "List Carousel," which uses static list data, and the "CMS Carousel," which uses dynamic lists populated with Studio CMS data.
Both are placed as carousel parts, and you can adjust their behavior through box settings and data settings.
Note: Infinite loop playback is not supported. For more details, see Can the carousel autoplay feature loop elements infinitely?
Carousel structure basics
Carousel design
Studio.Design's carousel is built on top of the List feature.
It consists of a carousel box that wraps everything, the carousel items arranged inside it, and the fields (properties) within each item.
When you change the layout or style of one item, the changes are applied to all other items in the same carousel.
Fields (properties) shown in the carousel
The titles, body text, images, categories, button labels, and other content displayed inside a carousel are managed as properties—separately from the carousel's design.
For a List Carousel, you set properties from the [Data] tab in the right panel of the design editor. For a CMS Carousel, you set them from the CMS dashboard.
Tip: Make use of conditional properties
You can vary styles per item by using properties such as Color, Number, and Boolean.
For example, you can do the following:
Toggle whether a "new" badge is shown using a Boolean value
Use a number or color to change a button's color on a per-item basis
Change the background or button color for each item
Display logic can be controlled by combining the CMS conditional settings with list property settings.
List Carousel vs. CMS Carousel
Carousel type | Where data is managed | Use case |
Small amounts of fixed information (campaign banners, set service highlights, etc.) | ||
Large volumes of frequently updated content, such as articles or products |
About the List Carousel
A List Carousel uses list property data from within the design editor. It's well suited to displaying static data or small amounts of information that can be managed entirely within the editor.
For how to add one and more details, see the List Carousel article.
About the CMS Carousel
A CMS Carousel uses CMS property data managed in Studio CMS. It's well suited to displaying frequently updated information—like articles or product details—in a carousel.
For how to add one and more details, 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.
Switching a carousel item to edit mode
To edit an item inside a carousel, you'll need to activate it first so it becomes editable.
You can make a carousel item editable in either of the following ways:
Double-click on the carousel item
Select the carousel item in the Layers panel
When the carousel item enters edit mode, the properties and a blue dot (the starting point for a connector) appear in the [Data] tab of the right panel.
The image below shows what the Data tab looks like when a carousel item is active in a CMS list.
Carousel autoplay
Carousels include an autoplay feature, which lets you set slides to switch automatically.
With autoplay, you can adjust settings like the interval, transition time, and pause on hover to control when and how quickly slides change.
For details on how to set it up, see Autoplay a carousel.
Note: Autoplay and accessibility
Autoplay and pause-on-hover behaviors can affect the experience of people using screen readers or relying on keyboard navigation.
Avoid putting critical information or actions only inside a carousel—consider providing alternative paths or text links as well.
Item count and order
Number of carousel items shown
A carousel can display a maximum of 50 items.
A carousel can show up to 7 items on the screen at the same time.
Carousel item order
For a List Carousel, item order is controlled from the table in the [Data] tab. For a CMS Carousel, you can manage the order using features like CMS Collections.
Display order and centering
In a carousel, the item at the top of the table in 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 adjust the item order accordingly.
For a CMS Carousel, you can use features like CMS Collections to manage item order.
carousel