实现 element ui 走马灯图片插入与自适应大小

 

  在进行这一模块开发的时候，走马灯组件不知道如何使用，还有大小的自适应。我就用官方给的参考文档来进行修改。

 接下来是解决方案：

//以下是官网组件代码
<template>
  <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>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

下面是我自己的解决方案

 

 <div>   
     <template>
         <!--动态将图片轮播图的容器高度设置成与图片一致-->