关于swiper在vue中使用

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中文档中也给出了其他使用方法

swiper中文网
swiper英文网