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

  1. Click ">" on the left side of the design editor

  2. Select the "+Add" tab

  3. 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

  1. Select the carousel box

  2. Click on "<div>" in the upper left corner of the carousel box

  3. 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

  1. Click ">" on the left side of the design editor

  2. Select the "+Add" tab

  3. 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)

  1. Select a carousel box (list) and open the box settings panel

  2. Click the "+" button in the upper right corner of the list settings and add either "Text" or "Image" column

  3. 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

  1. Select the box and open the box settings panel on the right side of the editor

  2. Click Text or Image Settings

  3. Select variable name and display contents

Did this answer your question?