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:

{
  "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

{
  "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.

1.8 KiB Raw Permalink Blame History Unescape Escape