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

效果如下：

两个轮播图，上面的一个是普通的轮播效果，下面的是一个3d的旋转木马效果

接下来看普通轮播效果的代码：

<el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

这个是鼠标悬停上去会切换图片的而改变这个效果只要加一个trigger="click"

例如：

<el-carousel trigger="click" height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

本人做的是普通的悬停效果，这里点击是个拓展

接下来看走马灯轮播效果的代码：

 <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in 6" :key="item">
      <h3 class="medium">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>

以上代码就可以实现效果图下方的走马灯轮播，同样也可以用trigger="click"改变切换图片方式

还有一个效果就是改变方向的轮播效果（本人没写在效果图上）：

<el-carousel height="200px" direction="vertical" :autoplay="false">
    <el-carousel-item v-for="item in 3" :key="item">
      <h3 class="medium">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>

其实原理就是给他加上direction这个属性他的值有两个一个是vertical另一个是horizontal，其中horizontal是默认属性

然后就是轮播图下方的小框框是可以添加文字的（效果图如下）：

代码如下：

<el-carousel height="200px">
              <el-carousel-item v-for="item in timer" :key="item.ids" :label="item.ids">
                <h3 class="small"><img :src='item.id' height="190px"/></h3>
              </el-carousel-item>
            </el-carousel>

这是我在原来的基础上改变了他的样式，其实在下面加上文字只需要加上label这个属性他的值就是你想要加入的文字，我这里采用了双向绑定，绑定了我循环的元素中的ids这个属性