65 lines
1.8 KiB
Markdown
65 lines
1.8 KiB
Markdown
# Carousel
|
||
|
||
**Control Functionality:** An auto-rotating carousel widget. Cards are arranged in an arc with the center card being the largest and clearest, while side cards progressively shrink and fade. Auto-rotates on a timer, and supports hover-to-flip when used with FlipCard.
|
||
**Type:** Basic Control
|
||
**Parent Control:** `bricks.Layout`
|
||
|
||
## Initialization Parameters
|
||
|
||
| Parameter | Type | Description |
|
||
|-------|------|------|
|
||
| `cardWidth` | number | Width of center card in px. Default: `280`. |
|
||
| `cardHeight` | number | Height of center card in px. Default: `360`. |
|
||
| `interval` | number | Auto-rotation interval in ms. Default: `3000`. |
|
||
| `css` | string/object | Custom CSS class name. |
|
||
|
||
## Subwidget Structure
|
||
|
||
Carousel 接受多个子控件，Each subwidget becomes a carousel card:
|
||
|
||
```json
|
||
{
|
||
"widgettype": "Carousel",
|
||
"subwidgets": [
|
||
{"widgettype": "FlipCard", ...},
|
||
{"widgettype": "FlipCard", ...},
|
||
...
|
||
]
|
||
}
|
||
```
|
||
|
||
Recommended to use 7-8 cards for the best visual effect.
|
||
|
||
## Main Events
|
||
|
||
- **`rotate`**
|
||
Fires after each rotation completes. Can be used to sync external indicators.
|
||
|
||
## Example
|
||
|
||
```json
|
||
{
|
||
"widgettype": "Carousel",
|
||
"options": {"cardWidth": 280, "cardHeight": 360, "interval": 3000},
|
||
"subwidgets": [
|
||
{
|
||
"widgettype": "FlipCard",
|
||
"subwidgets": [
|
||
{"widgettype": "VBox", "subwidgets": [
|
||
{"widgettype": "Text", "options": {"text": "洞察入微"}},
|
||
{"widgettype": "Text", "options": {"text": "机器视觉检测"}}
|
||
]},
|
||
{"widgettype": "VBox", "subwidgets": [
|
||
{"widgettype": "Text", "options": {"text": "毫秒级检测速度"}},
|
||
{"widgettype": "Text", "options": {"text": "95% 漏检率降低"}}
|
||
]}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## Dependencies
|
||
|
||
Requires `carousel.js` (provides auto-rotation and positioning logic) and corresponding CSS styles.
|