vue图片轮播

最新推荐文章于 2024-09-05 10:11:56 发布

原创最新推荐文章于 2024-09-05 10:11:56 发布 · 277 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#element-ui

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍如何使用Vue.js创建一个具有自动切换效果的轮播图组件，包括.vue文件结构、图片路径设置、样式定制及运行结果展示。

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.运行结果