swiper官方文档：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

1.安装

注意：swiper和vue-awesome-swiper的版本一定一定一定要相对应，版本对应如下：

Swiper 5-6 vue-awesome-swiper@4.1.1(vue2)

Swiper 4.x vue-awesome-swiper@3.1.3(vue2)

Swiper 3.x vue-awesome-swiper@2.6.7(vue2)

npm install swiper@4.5.1 vue-awesome-swiper@3.1.3 --save

或

npm install swiper@5.2.0 vue-awesome-swiper@4.1.1 --save

检查package.json里swiper和vue-awesome-swiper是否安装成功

 或 

2.引入

方法一：在main.js中全局引入

// swiper@4.5.1 vue-awesome-swiper@3.1.3
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)// swiper@5.2.0 vue-awesome-swiper@4.1.1
import VueAwesomeSwiper from 'vue-awesome-swiper'
import swipercss from 'swiper/css/swiper.min.css'
Vue.use(VueAwesomeSwiper, {swipercss
}) // 注册

方法二：局部引入

注意：局部引入，引入模块根据版本区分大小写：

vue-awesome-swiper@3.x 版本的 ---- 引入模块时使用小写：

import { swiper, swiperSlide } from “vue-awesome-swiper”；

vue-awesome-swiper@4.x 版本的 ---- 引入模块时使用大写：

import { Swiper, SwiperSlide } from “vue-awesome-swiper”；

// swiper@4.5.1 vue-awesome-swiper@3.1.3
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {//import引入的组件需要注入到对象中才能使用components: {swiper,swiperSlide,},
}// swiper@5.2.0 vue-awesome-swiper@4.1.1
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.min.css'
export default {//import引入的组件需要注入到对象中才能使用components: {Swiper,SwiperSlide},
}

3.使用

这里要注意的是引入的版本对应，否则会报错，两个版本我都试过了是ok的

<template><div class="main-body module-contain"><div class="board-contain"><div class="lm-container-right-block"@mouseenter="on_bot_enter"@mouseleave="on_bot_leave"><swiper :options="swiperOption"ref="mySwiper"><swiper-slide v-for="i in list":key="i">{{ i }}</swiper-slide><!-- 标记页数 --><!-- <div class="swiper-pagination"slot="pagination"></div> --><!-- 左右箭头 --><!-- <div class="swiper-button-prev swiper-button-black"slot="button-prev"></div><div class="swiper-button-next swiper-button-black"slot="button-next"></div> --></swiper></div></div></div>
</template>
<script>
// 局部引入
// swiper@4.5.1 vue-awesome-swiper@3.1.3
// import { swiper, swiperSlide } from "vue-awesome-swiper"
// import "swiper/dist/css/swiper.css"// swiper@5.2.0 vue-awesome-swiper@4.1.1
// import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// import 'swiper/css/swiper.min.css'
export default {components: {//import引入的组件需要注入到对象中才能使用// swiper@4.5.1 vue-awesome-swiper@3.1.3// swiper,// swiperSlide// swiper@5.2.0 vue-awesome-swiper@4.1.1// Swiper,// SwiperSlide},data () {return {swiperOption: {// 循环播放loop: true,// 循环方向direction: "vertical",// 设置slider容器能够同时显示的slides数量(carousel模式)// slidesPerView: 1,slidesPerView: "auto",// 设定为true时，active slide会居中，而不是默认状态下的居左(false)centeredSlides: true,// 滑动速度// speed: 1500,// 在slide之间设置距离（单位px）spaceBetween: 10,// 设定初始化时slide的索引，Swiper默认初始化时显示第一个slideinitialSlide: 0,// 自动播放autoplay: {// 隔×秒自动滑动一次delay: 2000,stopOnLastSlide: false,// 设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。默认为truedisableOnInteraction: false},// loopedSlides: 3,// 标记页数// pagination: {//   el: ".swiper-pagination",//   clickable: true, // 允许分页点击跳转// },// 左右箭头// navigation: {//   prevEl: ".swiper-button-prev",//   nextEl: ".swiper-button-next",// },},list: [1, 2, 3, 4, 5, 6]}},mounted () {},watch: {},methods: {on_bot_enter () {this.$refs.mySwiper.swiper.autoplay.stop()},on_bot_leave () {this.$refs.mySwiper.swiper.autoplay.start()},}
}
</script><style lang="less" scoped>
.module-contain {height: 87vh;overflow: hidden;.board-contain {.display-flex {display: flex;justify-content: space-between;}.lm-container-right-block {position: relative;overflow: auto;width: 200px;height: 200px;.swiper-container {width: 100%;height: 100%;position: absolute;top: 0;bottom: 0;}.swiper-slide {height: 60px;background-color: #bcf;}}}
}
</style>

注意设置高度设置.swiper-container和.swiper-slide的样式，

swiper-container 为设置整体滚动区域，高度一定要设置

swiper-slide 为设置单个的样式，高度一定要设置

其他的配置可以去官网查找对应的API

参考：

https://www.jianshu.com/p/51e52bfe5bf1

https://blog.csdn.net/weixin_48850734/article/details/128299949