vue2 走马灯 展示多个

使用 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>