Rotation 轮播图

在有限空间内，循环播放同一类型的图片、文字等内容

基础用法

结合使用 a-rotation 和 a-rotation-item 标签生成一个轮播图。 将展示的内容放在 a-rotation-item 标签内。

1

2

3

4

Details

<template>
  <ARotation
    :autoplay="true"
    :duration="3000"
    :initial="1"
    :hasDot="true"
    dotPositon="center"
    :hasDirector="true"
  >
    <ARotationItem v-for="(item, index) in picList" :key="index">
      <div :style="[{ background: item.background }]" class="img-item">
        <h3>{{ item.id }}</h3>
      </div>
    </ARotationItem>
  </ARotation>
</template>

<script lang="ts" setup>
const picList = [
  {
    id: 1,
    background: "#d3dce6",
  },
  {
    id: 2,
    background: "#99a9bf",
  },
  {
    id: 3,
    background: "#d3dce6",
  },
  {
    id: 4,
    background: "#99a9bf",
  },
];
</script>

<style  scoped>
.img-item {
  height: 300px;
  width: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }
</style>