element el-carousel轮播图的使用笔记

轮播图有多种样式，这里只选取使用了一种，有需要可以访问官网查看其他样式。

效果图：

官网demo：

// 这里使用了官网提供的demo
<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>

我的代码：

<template>
  <el-carousel
    :interval="4000"
    type="card"
    height="198px"
    trigger="click"
    style="width: 361px; margin: auto"
    :autoplay="false"
    @change="change"
  >
    -->
    <el-carousel-item v-for="(index, item) in robot" :key="item">
      <img
        class="cobot"
        :src="index"
        :title="index.split('/')[3].split('.')[0]"
      />
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: "robot",
  props: {},
  data() {
    return {
      // 产品图片，注意图片命名
      robot: [
        "static/Topbar/robot/mycobot280.png",
        "static/Topbar/robot/mycobot320.png",
        "static/Topbar/robot/mycobot600.png",
        "static/Topbar/robot/mypalletizer.png",
      ],
    };
  },
  methods: {
    // element 轮播图
    // change事件：幻灯片切换时触发，回调激活的幻灯片的索引，原幻灯片的索引
    change(new, old) {
      // 通知父组件幻灯片切换
      this.$emit("robotChanged", new + 1);
    },

    
  },
};
</script>

<style scoped>
.cobot,
.cobot_pro {
  height: 198px;
  width: 180px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #fff;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #fff;
}
.get {
  border: 2.5px solid #04a2d8;
  border-radius: 20px;
}
</style>

官网参数说明：