GrComponent

Appearance

Carousel 轮播图 ​

  • gr-carousel：轮播图的根组件，其子元素只能是 gr-carousel-item 组件。

  • gr-carousel-item：轮播图的子组件，每个轮播图的内容在此定义。

自定义样式 ​

移步到 CSS Part。

基本用法 ​

TIP

内置了 鼠标拖动切换 和 触摸拖动切换 的功能

13
查看代码
html
<gr-carousel>
  <gr-carousel-item>1</gr-carousel-item>
  <gr-carousel-item>
    <img src="./assets/imgs/home-bg.png" alt="" />
  </gr-carousel-item>
  <gr-carousel-item>3</gr-carousel-item>
</gr-carousel>
参数说明类型可选值默认值
duration切换的时间间隔(单位: ms)Number-4000

用法可参考 MDN ::part()伪类

名称说明
main-container根容器

  • 轮播图顶部 ​

名称说明
statistics-wrap轮播图统计的根容器
current-index当前轮播图索引
total-index总共的轮播图个数

  • 轮播图列表 ​

名称说明
carousel-wrap轮播图列表容器

  • 轮播图底部 ​

名称说明
footer-wrap轮播图底部容器
indicator-wrap指示器容器
indicator-item指示器元素

用法可参考 MDN ::part()伪类

名称说明
container根容器