使用 npm install “swiper”: “^11.2.4”,

在这里插入代码片
<template>
    <section class="swiper pc-banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div v-for="(item, index) in swiperData" :key="index" class="swiper-slide">
                    <div class="swiper_slide_box">
                        <h3 style="margin: 0;" class="herderName">{{ item.name }}</h3>
                        <div style="display: flex; justify-content: space-between; align-items: center; "
                            class="listcaer">
                            <div>
                                <p style="color:#4276FD ;">{{ item.zs }}</p>
                                <p class="swiper_title">总数</p>
                            </div>
                            <div>
                                <p style="color:#2BD191 ;">{{ item.zx }}</p>
                                <p class="swiper_title">在线</p>
                            </div>
                            <div>
                                <p style="color:#FFB868 ;">{{ item.lx }}</p>
                                <p class="swiper_title">离线</p>
                            </div>
                            <div>
                                <p style="color: #FC6A68;"> {{ item.yc }}</p>
                                <p class="swiper_title">异常</p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper_slide_img">
                        <img :src="item.url" alt="">
                    </div>
                </div>
            </div>
            <div class="swiper-button-prev1">
            </div>
            <div class="swiper-button-next1">
            </div>
        </div>
    </section>
</template>

<script>
export default {
    props: {
        swiperData: {
            type: Array,
            default: () => [
                {
                    name: '视频监控设备',
                    zs: 15,
                    zx: 14,
                    lx: 1,
                    yc: 0
                },
                {
                    name: '视频监控设备',
                    zs: 15,
                    zx: 14,
                    lx: 1,
                    yc: 0
                },
                {
                    name: '视频监控设备',
                    zs: 15,
                    zx: 14,
                    lx: 1,
                    yc: 0
                },
                {
                    name: '视频监控设备',
                    zs: 15,
                    zx: 14,
                    lx: 1,
                    yc: 0
                },
                {
                    name: '视频监控设备',
                    zs: 15,
                    zx: 14,
                    lx: 1,
                    yc: 0
                },
            ]
        }
    },
    data() {
        return {
        }
    },
    mounted() {

        this.Lunbo()
    },
    methods: {
        Lunbo() {
            var swiper = new Swiper(".swiper-container", {
                freeMode: true,
                slidesPerView: 4,
                spaceBetween: 30,
                loop: true,//循环
                navigation: {
                    nextEl: ".swiper-button-prev1",
                    prevEl: ".swiper-button-next1",
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            });
        },
    }
};
</script>
<style lang="scss" scoped>
.swiper-pagination-bullets.swiper-pagination-horizontal {
    display: none;
}




.pc-banner {
    width: 100%;
    position: relative;
    height: 100%;
    // box-shadow: 10px 0 5px -5px rgba(0, 0, 0, 0.5);
    border-right: 1px solid rgba(6, 194, 241, 0.233);

    &:hover {

        .swiper-button-prev1,
        .swiper-button-next1 {
            display: block;
        }
    }

    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: -1px;
        /* 调整这个值来让阴影显示在盒子的右边 */
        width: 5px;
        /* 调整这个值来改变阴影的宽度 */
        height: 100%;
        /* 与盒子高度相同 */
        box-shadow: inset -5px 0px 5px -5px rgba(6, 194, 241, 0.5);
        /* 向内的右边阴影 */
    }

    .swiper-container {
        width: 100%;
        height: 100%;
        margin-top: vh(5);

    }

    .swiper-wrapper {
        height: 90%;
        display: flex;
    }

}



.swiper-slide-active {
    -webkit-transform: scale(1);
    transform: scale(1);
}


.herderName{
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: vw(14);
color: #333333;
text-align: left;
font-style: normal;
}
.swiper-slide {
    height: 90%;
    // border: 1px solid #ccc;
    display: flex;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(33, 90, 134, 0.21);
    border-radius: 4px;
    border: 1px solid #FFFFFF;
    padding: vw(10);
    padding-bottom: 0;

    .swiper_slide_box {
        width: calc(100% - 42px);

        .listcaer {
            text-align: center;
            margin-top: vh(25);

            .swiper_title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: vw(12);
                color: #999999;
                letter-spacing: vw(2);
                text-align: left;
                font-style: normal;
            }
        }
    }

    .swiper_slide_img {
        width: vw(42);
        height: vh(42);

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


.swiper-button-prev1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    margin-top: vh(55);
    display: none;
    width: vw(12);
    height: vh(20);
    cursor: pointer;
    background-size: 100% 100%;
    background-image: url("../../../../assets/homeimage/05.png");
    background-repeat: no-repeat;
}

.swiper-button-next1 {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: vh(55);
    z-index: 999;
    width: vw(12);
    height: vh(20);
    display: none;
    cursor: pointer;

    background-size: 100% 100%;
    background-image: url("../../../../assets/homeimage/06.png");
    background-repeat: no-repeat;
}

.swiper-slide {
    -webkit-transition: transform 1.0s;
    -moz-transition: transform 1.0s;
    -ms-transition: transform 1.0s;
    -o-transition: transform 1.0s;
}



.none-effect {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
}
</style>
<style lang="scss" scoped>
@import '/swiper-bundle.min.css';
</style>