vue2 el-carousel轮播图和文字一起改变

vue项目的话 安装一下element依赖

复制代码
npm i element-ui -S

main入口文件引入element包

我在app文件里边去写的

复制代码
<template>
  <div class="w">
    <el-carousel height="460px">
        <el-carousel-item v-for="item in items" :key="item.id">
          <h3 class="small">
            <img :src="item.url" alt />
            <span>{{item.title}}</span>
          </h3>
          
        </el-carousel-item>
      </el-carousel>
  </div>
</template>
<script>
export default {
  data(){
    return{
        items:[
           {url:require('./assets/200319120534-7-1200.jpg'),title:'妇科咨询',id:0},
           {url:require('./assets/cesium1.jpg'),title:'儿童咨询',id:1},
           {url:require('./assets/u=1604010673,2427861166&fm=253&fmt=auto&app=138&f=JPEG.webp'),title:'中医咨询',id:2},
        ]
    }
  },
  methods:{
   
   
  },
}
</script>
<style>
  .w {
    margin: 0 auto;
    width: 1226px;
  }
  .el-carousel__item h3 {
    color: #694747;
    font-size: 14px;
    opacity: 1;
    line-height: 300px;
    margin: 0;
    text-align: center;
  }
   .el-carousel__item h3 span{
    /* z-index: 999; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    color: orange;
  }

  .small img {
    width: 100%;
    height: 100%;
  }

  /* .el-carousel__container {
    width: 1226px;
    height: 460px;
  } */
</style>
相关推荐
行云&流水10 分钟前
打造自己的组件库(二)CSS工程化方案
前端·vue.js·vue3组件库
弗锐土豆1 小时前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
Hilaku1 小时前
我为什么放弃了“大厂梦”,去了一家“小公司”?
前端·javascript·面试
1undefined21 小时前
element中的table改造成虚拟列表(不定高),并封装成hooks
前端·vue.js
wangpq1 小时前
element-ui表单使用validateField校验多层循环中的字段
javascript·vue.js
jackyChan1 小时前
ES6 Proxy 性能问题,你真知道吗?🚨
前端·javascript
豆苗学前端1 小时前
从零开始教你如何使用 Vue 3 + TypeScript 实现一个现代化的液态玻璃效果(Glass Morphism)登录卡片
前端·vue.js·面试
我命由我123452 小时前
Vue 开发问题:Missing required prop: “value“
开发语言·前端·javascript·vue.js·前端框架·ecmascript·js
16年上任的CTO2 小时前
一文讲清楚React中的key值作用与原理
前端·javascript·react.js·react key
快起来别睡了2 小时前
Vue 中组件的生命周期与 v-if、v-show 的区别详解
前端·vue.js