1.版本78目前看官方文档示例只能在vue3中使用, 可参考官方文档
https://swiperjs.com/get-started#what-next
2.因为我们用的是vue2所以最终找到了这篇
https://blog.csdn.net/weixin_43131046/article/details/124481736
安装选择5.4.5版本
yarn add swiper@5.4.5
在要使用的组件中引入
// import Swiper JS
import Swiper from 'swiper'
// import Swiper styles
import 'swiper/css/swiper.min.css'
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide1">Slide 1</div>
<div class="swiper-slide swiper-slide2">Slide 2</div>
<div class="swiper-slide swiper-slide3">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</template>
<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入
export default {
name: 'HelloWorld',
data() {
return {
// swiper实例 实例上有各种方法
swiperInstance: null
}
}
mounted() {
var swiperInstance = new Swiper('.swiper-container', {
// config...
})
}
}
</script>
<style scoped>
</style>
3.swiper中文档中也给出了其他使用方法