vue图片轮播

最新推荐文章于 2024-02-01 00:49:55 发布

请叫我王肉肉

最新推荐文章于 2024-02-01 00:49:55 发布

阅读量223

点赞数

分类专栏： Vue 文章标签： element-ui

本文链接：https://blog.csdn.net/developerwyg/article/details/103258930

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. .vue文件内容

<div class="slider">
  <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="(item,index) in homePageImg" :key="index">
      <img class="homepage-img" :src="item.src">
    </el-carousel-item>
  </el-carousel>
</div>

2.homePageImg---图片路径

data() {
    return {
        homePageImg: [
            {src: require('./1.jpeg'),},
            {src: require('./2.jpg'),},
            {src: require('./3.jpg'),},
            {src: require('./4.jpg'),},
            {src: require('./5.jpg'),},
        ],
    }
},

3.引入 import './HomePage.less';

.slider {
  font-size: 25px;
  height: 600px;
  text-align: center;
  .el-carousel__button {
    width: 14px;
    height: 14px;
    border-radius: 14px;
  }
  .el-carousel__container {
    position: relative;
    height: 600px;
  }
  .el-carousel__indicator--horizontal {
    padding: 12px 5px;
  }
  .homepage-img{
    width:100%;
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    z-index: -100;
    background-size: cover;
  }
}

4.运行结果