A carousel (slider/slideshow) that switches the display of multiple items with a click or swipe can be created by using only the list function in the design editor.
You can manage the content of each item in a list of a settings panel.
*If you want to use the CMS data for the carousel, please refer to the "How to make a Carousel / Slider using CMS Data" article.
How to add a carousel box
From the Add panel of the Design Editor, you can select a component part with three items.
Steps
Click ">" on the left side of the design editor
Select the "+Add" tab
Drag and drop the "Carousel box" from the bottom of the "Boxes" tab and place it on the screen.
How to edit the carousel item
You can edit the displayed content on the carousel box in a list of a box settings panel.
Steps
Select the carousel box
Click on "<div>" in the upper left corner of the carousel box
Edit the contents in the settings panel
How to edit the design of the carousel item
By default, the "title," "cover," "description," and "publishedAt" columns are added to the list, and you can add more columns and display them on the "carousel."
1) Add box on carousel
Click ">" on the left side of the design editor
Select the "+Add" tab
Drag and drop the "Text Box" or "Image Box" from the top of the "Box" tab and place it in the carousel box.
2) Add content to the list (columns)
Select a carousel box (list) and open the box settings panel
Click the "+" button in the upper right corner of the list settings and add either "Text" or "Image" column
Edit the contents of the added column in the list, item by item
*You can edit the variable name by clicking on the "︙" next to the variable name.
3) Linking Content
Select the box and open the box settings panel on the right side of the editor
Click Text or Image Settings
Select variable name and display contents
You can configure the autoplay of the Carousel on the settings panel.
The slides will stop when you hover the cursor over the slide or focus on the slide with keyboard operation when you turn on the Pause on hover option.
If the carousel is a previous version without the autoplay option, click on “Convert” in the panel on the right to enable new autoplay options. Read How can I autoplay the carousel/slider?｜STUDIO U for more information.