The carousel list I widget allows you to customize the carousel list style, the animation and display of content in the carousel list, and other options as needed.

Style

  • Basic Attributes
    • Size: Set the size of the widget by adjusting its width and height.
    • Position: Set the position of the widget by adjusting its abscissa and ordinate.
    • Others: Set the rotation angle and opacity of the widget.
  • Global Settings
    • Font Family: To set the font of the displayed text, click the drop-down arrow and select the target font. The default font is Microsoft YaHei.
    • Duration: To change the animation duration, enter a value, or click + or . The unit is milliseconds.
    • Padding: To adjust the spacing between the rows, enter a value, or click + or .
    • Quantity: To change the number of rows to be displayed on each page, enter a value, or click + or .
    • Loop
      • If you select this option, text in the carousel list is automatically displayed in rotation.
      • If you clear this option, text in the carousel list is displayed only once.
      Note The loop function will take effect a few seconds after you select it.
    • Loop Time: To change the time interval between the display of two pages, enter a value, or click + or . The unit is milliseconds.


  • Index: To display the index numbers, click the Eye icon.
    • Text Style
      • Font Size: To change the font size of the index numbers, enter a value, or click + or .
      • Font Color: To change the font color of the index numbers, see Color picker.
      • Font Weight: To set the font weight of the index numbers, click the drop-down arrow and select the target font weight.
    • Width: You can customize the width of the space occupied by the index numbers as needed. The unit is pixels.
    • Padding: To adjust the spacing between the index numbers and the displayed text, enter a value, or click + or .


  • Content
    • Text Style
      • Font Size: To change the font size of the displayed text, enter a value, or click + or .
      • Font Color: To change the font color of the displayed text, see Color picker.
      • Font Weight: To set the font weight of the displayed text, click the drop-down arrow and select the target font weight.
    • Marquee: To display the marquee style, click the Eye icon.
      • Duration: To change the time for displaying the text that exceeds the length of the row, enter a value, or click + or . The unit is milliseconds.


  • Bar: To display the row style, click the Eye icon.
    • Color: To change the color of the rows, see Color picker.
    • Height: To change the height of the rows, enter a value, or click + or .


  • Light: To display the light style, click the Eye icon.
    • Color: To change the color of the light sweep, see Color picker.
    • Width: To change the length of the light sweep, enter a value, or click + or .
    • Height: To change the height of the light sweep, enter a value, or click + or . The part of the light sweep that exceeds the dimensions of the row is not displayed.
    • Duration: To change the time interval between the display of two light sweeps, enter a value, or click + or . The unit is milliseconds.


  • Segment: To display the segments, click the Eye icon.
    • Color: To change the color of the segments, see Color picker.
    • Height: To change the height of the segments, enter a value, or click + or .


Data

  • value: value in each row of the carousel list. The value of this field corresponds to the length of each row with data being displayed according to the corresponding values.
  • content: text displayed in each row of the carousel list.


Interaction

This widget is not connected to any events yet.