ECL 木卫一

npm 软件包 : @ecl/carousel

npm install --save @ecl/carousel

参数

• 颜色( m) (字符串)(默认为:")颜色模式的名称
• “项目” (阵列)(默认:[ ]): 与ECL Banner组件结构相容的横幅列表
• "尺寸" (字符串)(默认:'m') 旋转木马的大小;可以是's','m','l'
• “反标签” (字符串)(默认:"of")当前和总数之间使用的标签
• "sr 说明" (字符串)(默认:")屏幕阅读器对旋转木马的描述
• "sr role" (法语) (字符串)(默认:'carousel') 旋转木马的屏幕阅读器本地化角色
• "sr slip role" (英语) (字符串) (默认: “ slip” ) 每个幻灯片的屏幕阅读器本地化角色
• "游戏" (字符串)(默认:'Play carousel') 播放按钮的屏幕阅读器标签
• "暂停" (字符串)(默认:"暂停旋转") 暂停按钮的屏幕阅读器标签
• "sr prev" (英语) (字符串) (默认:上一个按钮的屏幕阅读器标签)
• "下一个" (字符串)(默认 : “ 下一张幻灯片 ” ) 屏幕阅读器标签用于下一个按钮
• "满" "活" (boolean) (默认:虚假) 全宽旋转木马(在网格内)
• "超级" (字符串)(默认为:") 额外类(空格分隔)
• “外部属性” (阵列) (默认: []) 额外属性
  • 名称 (字符串) 属性名称, 如“ 数据测试 ”
  • 值 (字符串) 属性值, 如 : “ data- test-1 ”

示例

{% include '@ecl/carousel/carousel.html.twig' with {
  sr_description: 'Carousel description here',
  items: [
    {
      title: 'EU Budget for the future',
      description: 'Innovation, economy, environment and geopolitics',
      link: {
        link: {
          label: 'Subscribe',
          path: exampleLink,
          aria_label: 'Subscribe',
          icon_position: 'after',
        },
        icon: { 
          name: 'caret-right', 
          family: 'phosphor',
          size: 'xs', 
        }, 
      },
      image:
        'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
      variant: 'image',
      centered: false,
    },
    ...
  ],
  counter_label: 'of',
} %}