vue中使用element ui轮播图_vue-elementui实现图片轮播

1.先安装Element UI，在element.js里面引入Element UI 轮播图组件并全局注册

import Vue from 'vue'
import{Carousel,CarouselItem}from "element-ui"


Vue.use(Carousel)
Vue.use(CarouselItem)

1
2
3
4
5
6
7

2.在demo.vue中导入轮播图结构和样式和行为
结构

  <div class="ccc">
      <el-carousel :interval="5000" arrow="always" height="891px">
        <el-carousel-item v-for="item in imgArray" :key="item">
         <img :src="item" class="rightImg">
        </el-carousel-item>
      </el-carousel>
    </div>
1
2
3
4
5
6
7

样式

.ccc {
  width: 100%;
  height: 898px;
  > .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  > .el-carousel__item:nth-child(2n) {
    backgr
1
2
3
4
5
6
7
8
9
10
11
12