首页 > 其他分享> > vue+element实现自定义轮播效果

vue+element实现自定义轮播效果

2021-11-21 21:03:00 作者：互联网

毕设篇：vue+element实现自定义轮播效果

效果展示

实现代码

Carouse.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="lib/index.js"></script>
    <link rel="stylesheet" href="css/common.css">
</head>

<body>
    <div id="app">
        <template>
            <el-carousel indicator-position="outside" style="margin: 50px auto; width: 1152px;">
                <el-carousel-item v-for="item in imgArray" :key="item">
                    <img :src="item" class="rightImg">
                </el-carousel-item>
            </el-carousel>
        </template>
    </div>
    <script>
        new Vue({
            el: "#app",
            // name: "XXXXXXX",
            data() {
                return {
                    imgArray: [
                        'img/1.png',
                        'img/2.png',
                        'img/3.png',
                        'img/4.png'
                    ]
                }
            }
        })
    </script>
</body>

</html>

style样式

<style>
		/*在检查元素中，可以发现这个class类，给它对应的属性就可以解决了*/
        /*.el-carousel__container {
            width: 1152px;
            height: 540px;
            text-align: center;
        }*/
        /*显示该样式，会发现出现滚动条*/
        /* .el-carousel__item {
            width: 1152px;
            height: 540px;
        } */
        .rightImg {
            width: 1152px;
            height: 540px;
        }
        .el-carousel__item img {
            opacity: 0.85;
            line-height: 540px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    </style>

问题解决

使用官方的走马灯很简单，就几行代码就可以实现

html中的element代码

<template>
    <el-carousel indicator-position="outside" style="margin: 50px auto; width: 1152px;">
      <el-carousel-item v-for="item in imgArray" :key="item">
          <img :src="item" class="rightImg">
      </el-carousel-item>
    </el-carousel>
</template>

但是当你想自定义轮播图大小时，你会发现图片并没有完全显示出来。一开始我以为是el-carousel-item组件默认设置有超出高度隐藏的属性，也就是overflow: hidden;于是设置el-carousel-item 和 .rightImg一样的css属性，但是不仅没有效果，右侧还会出现一个滚动条

在这里插入图片描述
这简直让我气抖冷！在检查不是代码本身的问题时，就需要我们在浏览器摁下 F12 —— 检查元素了

在这里插入图片描述

这时，可以发现图片是在一个class为el-carousel__container的div里面的，这本质上是element内部所隐藏的代码（不得不说element ui确实简化了很多代码），并且发现它的默认高度在300px左右，所以只要修改它的高度就ok了

<div class="el-carousel__container"></div>

事实也是如此，将下面样式显示就大功告成了

 .el-carousel__container {
            width: 1152px;
            height: 540px;
            text-align: center;//让左右两边箭头居中
 }

vue+element实现自定义轮播效果

毕设篇：vue+element实现自定义轮播效果

效果展示

实现代码

相关描述

问题解决

相关链接 && 资源分享