Carousel

Carousel is a component that displays multiple items (images, content, etc.) in a slide format. It has an automatic slide feature.
Added in v4.0.0.

Property

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	Auto-generated	id	string	Auto-generated	The `[id]` property cannot be set by actions.
2	Width	String	300	width	string	300	Component width
3	Height	String	200	height	string	200	Component height
4	X	String		x	string		X coordinate position
5	Y	String		y	string		Y coordinate position
6	Icon Color	String		iconColor	string		Icon color shown when no image is set
7	Background Color	String		backgroundColor	string		Background color shown when no image is set
8	Object Fit	Selection 1. Cover 2. Contain 3. None	Cover	objectFit	string	cover	Image display method
9	Allow Slide Next	Boolean	ON	allowSlideNext	boolean	true	Enables moving to the next slide
10	Allow Slide Prev	Boolean	ON	allowSlidePrev	boolean	true	Enables moving to the previous slide
11	Allow Touch Move	Boolean	ON	allowTouchMove	boolean	true	Touch operation setting for slides
12	Auto Play	Object	{enabled: false, delay: 3000}	autoPlay	object	{enabled: false, delay: 3000}	enabled: auto play setting delay: interval between slides (milliseconds) If this parameter is not set, auto play is disabled.
13	Effect	Selection 1. Slide 2. Fade 3. Cube 4. Coverflow 5. Flip 6. Cards	Slide	effect 1. slide 2. fade 3. cube 4. coverflow 5. flip 6. cards	string	slide	Effect setting when slides change 1. Slide - Slides horizontally or vertically 2. Fade - Images fade between transitions 3. Cube - Images rotate like faces of a cube 4. Coverflow - The center slide is emphasized and adjacent slides are arranged with depth 5. Flip - Transitions by flipping like turning over a card 6. Cards - Cards overlap and the next card comes forward
14	Speed	Number	300	speed	number	300	Transition time between slides (milliseconds)
15	Free Mode	Object	{enabled: false, momentum: true, sticky: false}	freeMode	object	{enabled: false, momentum: true, sticky: false}	Free mode setting enabled: enable free mode momentum: enable momentum scrolling sticky: stop at the nearest slide when scrolling ends
16	Loop	Boolean	OFF	loop	boolean	false	Slide loop setting
17	Direction	Selection 1. Horizontal 2. Vertical	Horizontal	direction 1.horizontal 2.vertical	string	horizontal	Slide direction setting
18	Navigation	Boolean	ON	navigation	boolean	true	Show/hide previous and next buttons Button design cannot be changed.
19	Slides Per View	Number	1	slidesPerView	number	1	Number of slides shown at the same time
20	Slides Per Group	Number	1	slidesPerGroup	number	1	Number of slides to move per transition
21	Space Between	Number	0	spaceBetween	number	0	Spacing between slides (px)
22	Threshold	Number	5	threshold	number	5	Threshold for moving to the next slide during swipe operation
23	Pagination	Object	{enabled: true, clickable: false, type: ‘bullets’}	pagination	object	{enabled: true, clickable: false, type: ‘bullets’}	Pagination settings enabled: enable pagination clickable: enable pagination click type: pagination type (bullets, fraction, progressbar)
24	Scrollbar	Object	{enabled: true, hide: true}	scrollbar	object	{enabled: true, hide: true}	Scrollbar settings enabled: enable scrollbar hide: show scrollbar only during user operation
25	Visibility	Boolean	ON	visibility	boolean	true	Component visibility
26	Value	Array of Object	`[Detail 1]`	value	array of object	`[Detail 1]`	Display image settings
27	Initial Slide	Number	0	initialSlide	number	0	First slide to display The first slide configured in `[Value]` is 0.
28	Click Event	Select 1. None 2. Action	None	clickEvent	string	none	Event on click
29	Selected	Object	`[Detail 2]`	selected	object	`[Detail 2]`	Information of the clicked slide

The [Width] and [Height] property values can include the following: For px display, specify only numbers; for % display, specify % in the unit. Behavior is not supported if values other than the following are entered.
- Numbers
- Numbers%
- calc() function
The [X] and [Y] property values can include the following: For px display, specify only numbers. Behavior is not supported if values other than the following are entered.
- Numbers
- calc() function
The calc() function is a CSS function that enables calculation. (Example: calc(100% - 30px)) The units that can be used with the calc() function are "%" and "px". Other units (e.g., em, rem, etc.) are not supported.
When specifying size using the calc() function, the display in the editor and the appearance in the app may differ. Please check using the preview.
When [Auto Play] is ON, slides automatically switch at the specified interval.
When [Loop] is ON, pressing the next button from the last slide returns to the first slide.
[Initial Slide] starts from 0 (display starts from the 0th slide).

[Detail 1] Value (value)

The default state is registered as follows. Register using the [ADD] button. To delete, select the [Select] checkbox and click the [DELETE] button.
There is no restriction on the strings that can be set.

Select	ID	Image	Title Bar	Title	Subtitle	Position
Checkbox	01	/carousel/image_01.png	Checkbox: true			bottom
Checkbox	02	/carousel/image_02.png	Checkbox: true			bottom

value is an array of objects.

[
  {
    "id": "01",
    "image": "/carousel/image_01.png",
    "titleBar": true,
    "title": "WebPerformer-NX Carousel Component",
    "subTitle": "Carousel is a component that displays multiple items such as images and content in a slide format",
    "position": "bottom"
  }
]

[Detail 2] Selected Slide (selected)

selected is an object.

{
  "id": "01",
  "image": "/carousel/image_01.png",
  "titleBar": true,
  "title": "WebPerformer-NX Carousel Component",
  "subTitle": "Carousel is a component that displays multiple items such as images and content in a slide format",
  "position": "bottom"
}

Events

Event Name	Description
onclick	Executes an action when clicked.