amis2/docs/renderers/Carousel.md

Carousel

轮播图

• type 请设置成 carousel
• className 外层 Dom 的类名
• options 轮播面板数据，默认[]，支持以下模式
  • 图片
    • image 图片链接
    • imageClassName 图片类名
    • title 图片标题
    • titleClassName 图片标题类名
    • description 图片描述
    • descriptionClassName 图片描述类名
  • html HTML 自定义，同Tpl一致
• itemSchema 自定义schema来展示数据
• auto 是否自动轮播，默认true
• interval 切换动画间隔，默认5s
• duration 切换动画时长，默认0.5s
• width 宽度，默认auto
• height 高度，默认200px
• controls 显示左右箭头、底部圆点索引，默认['dots', 'arrows']
• controlsTheme 左右箭头、底部圆点索引颜色，默认light，另有dark模式
• animation 切换动画效果，默认fade，另有slide模式

{
    "type": "carousel",
    "controlTheme": "light",
    "height": "300",
    "animation": "slide",
    "options": [
        {
            "image": "https://video-react.js.org/assets/poster.png"
        },
        {
            "html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
        },
        {
            "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
        }
    ]
}