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 () {// swiper@4.5.1 vue-awesome-swiper@3.1.3// this.$refs.mySwiper.swiper.autoplay.stop()// swiper@5.2.0 vue-awesome-swiper@4.1.1this.$refs.mySwiper.$swiper.autoplay.stop()},on_bot_leave () {// swiper@4.5.1 vue-awesome-swiper@3.1.3// this.$refs.mySwiper.swiper.autoplay.start()// swiper@5.2.0 vue-awesome-swiper@4.1.1this.$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