开发版本很重要，如果版本不对，会很痛苦，并且解决不了问题。
vue: 3.0.0；（swiper6和7支持vue3）
swiper: 6.8.4,（注意：不再全面支持IE）
安装vue最新稳定版
npm install vue@next
安装swiper
npm install swiper@6 --save
注意：很多博客里使用的是Vue2，需要使用下面的包
npm install vue-awesome-swiper --save
Vue实现的源代码
<template>
<div>
<swiper
:slidesPerView="4"
:spaceBetween="30"
:pagination='{ "clickable": true }'
:navigation="true"
:centeredSlides="true"
:loop="true"
:autoplay='{
"delay": 2500,
"disableOnInteraction": false
}'
:effect="'coverflow'"
:grabCursor="true"
:coverflowEffect='{
"rotate": 50,
"stretch": 0,
"depth": 100,
"modifier": 1,
"slideShadows": true
}'
class="swiper">
<swiper-slide>
<div class="swiper_item">
<img src="@/assets/logo.png" />
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper_item">
<img src="@/assets/logo.png" />
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper_item">
<img src="@/assets/logo.png" />
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper_item">
<img src="@/assets/logo.png" />
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper_item">
<img src="@/assets/logo.png" />
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper_item">
<img src="@/assets/logo.png" />
</div>
</swiper-slide>
<swiper-slide>
<div class="swiper_item">
<img src="@/assets/logo.png" />
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
// 导入swiper中vue组件
import { Swiper, SwiperSlide } from 'swiper/vue';
// 导入swiper模块
import SwiperCore, {
// 设置底部小圆点
Pagination,
// 设置两边的箭头
Navigation,
// 动画效果
EffectCoverflow,
// 自动播放
Autoplay
} from 'swiper';
SwiperCore.use([Pagination, Navigation, EffectCoverflow, Autoplay]);
// 导入swiper的样式，注意此处导入的样式
import "swiper/swiper-bundle.css"
export default {
components: {
Swiper,
SwiperSlide,
},
data() {
return {
};
},
methods: {
}
}
</script>
<style scoped>
.swiper{
background-color: #CCCCCC;
}
.swiper_item{
background-color: #FFFFFF;
}
</style>