先看效果:
安装swiper时,指定版本号5.4.5;否则分页器可能不显示:npm install swiper@5.4.5
在main.js文件中添加;import 'swiper/css/swiper.min.css'
<template>
<div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../../assets/a.png" alt="" srcset="" /></div>
<div class="swiper-slide"> <img src="../../assets/b.png" alt="" srcset=""></div>
<div class="swiper-slide"><img src="../../assets/c.png" alt="" srcset="" /></div>
<div class="swiper-slide"><img src="../../assets/d.png" alt="" srcset="" /></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</template>
<script>
import Swiper from "swiper";
export default {
data() {
return {};
},
mounted() {
var swiper = new Swiper(".swiper-container", {
direction: "horizontal",
loop: true,
slidesPerView: "auto",
spaceBetween: 20,
centeredSlides: true,
observeParents:true,
observer:true,
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable:true,
},
});
},
methods: {},
};
</script>
<style lang="css" scoped>
.swiper-container {
margin-top: 0.2rem;
width: 100%;
/* height: 4rem; */
overflow: visible !important;
position: relative;
--swiper-pagination-color: rgba(90, 184, 239, 1);
}
.swiper-container .swiper-wrapper .swiper-slide {
width: 2.5rem;
border-radius: 0.12rem;
}
.swiper-container .swiper-wrapper .swiper-slide img {
width: 100%;
height: 100%;
border-radius: 0.12rem;
}
.swiper-container .swiper-wrapper .swiper-slide-prev {
margin-top: 0.12rem;
height: 4rem !important;
position: relative;
}
.swiper-container .swiper-wrapper .swiper-slide-prev:before {
content:"";
height:100%;
width:100%;
background:rgba(0, 0, 0, .3);
position: absolute;
top:0;
right:0;
border-radius: 0.12rem;
z-index: 1000;
}
.swiper-container .swiper-wrapper .swiper-slide-prev img {
height: 100%;
position: absolute;
z-index: 0;
}
.swiper-container .swiper-wrapper .swiper-slide-next {
margin-top: 0.182rem;
height: 4rem !important;
}
.swiper-container .swiper-wrapper .swiper-slide-next:before {
content:"";
height:100%;
width:100%;
background:rgba(0, 0, 0, .3);
position: absolute;
top:0;
right:0;
border-radius: 0.12rem;
z-index: 1000;
}
.swiper-container .swiper-wrapper .swiper-slide-next img {
height: 100%;
}
.swiper-container .swiper-wrapper .swiper-slide-active {
width: 2.5rem;
height: 4.36rem !important;
}
.swiper-pagination {
bottom: -0.3rem !important;
height:20px;
}
</style>