1、安装Swiper指定版本,选择3/4,高版本不太兼容,易出问题
npm install vue-awesome-swiper@3 --save-dev
2、引用组件,以及相关页面的实现,具体参考以下代码即可
<template>
<div class="example-3d">
<swiper class="swiper" :options="swiperOption">
<swiper-slide v-for="item in List">
<img :src="item.url" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
name: "Login",
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows : true
},
pagination: {
el: '.swiper-pagination'
}
},
List:[
{
url:require('../assets/images/login-background.jpg'),
},
{
url:require('../assets/images/profile.jpg'),
},
{
url:require('../assets/images/profile.jpg'),
},
],
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.example-3d {
width: 100%;
height: 400px;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper {
height: 100%;
width: 100%;
/*}*/
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
width: 60%;
height: 300px;
overflow:hidden;
text-align: center;
font-weight: bold;
background-color: #2C8DFB;
background-position: center;
background-size: cover;
color: white;
}
/*.swiper-pagination {
/deep/ .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: white;
}
}*/
}
</style>
3、具体实现的效果如下
4、提供swiper的中文官网链接如下
https://www.swiper.com.cn/
5、vue-awesome-swiper实现的demo链接