一：npm i vue-awesome-swiper --save
来在项目中先安装这个专门在vue中使用的swiper的npm包
二：在主入口js文件中引入，我的项目是main.js
在main.js中：
import Vue from 'vue'
import swip from 'swiper/dist/css/swiper.css' //需要在单独把这个css引入
import VueAwesomeSwiper from 'vue-awesome-swiper' //引入这个npm包
Vue.use(VueAwesomeSwiper)
三：在具体的vue文件中的使用
HTML： //使用下面的来用插件
<swiper :options="swiperOption" ref="mySwiper" >
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>//
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<!--<div class="swiper-scrollbar" slot="scrollbar"></div>-->
</swiper>
四：js的部分，写在当前vue文件的script里面
js :
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default{
data() {
return {
swiperOption: { //更多的参数的配置看swiper4官网介绍：http://www.swiper.com.cn/api/navigation/210.html
notNextTick: true,
loop:true,
autoplay: 3000,
direction : 'horizontal',
grabCursor : true,
setWrapperSize :true,
autoHeight: true,
pagination : '.swiper-pagination',
paginationClickable :true,
navigation: { //最新版本的需要这样配置，按钮才有效
prevEl:'.swiper-button-prev',//上一张
nextEl:'.swiper-button-next'//下一张
},
scrollbar:'.swiper-scrollbar',//滚动条
mousewheelControl : true,
observeParents:true
}
}
},
components: {
swiper,
swiperSlide
}
}
五：css的一些样式的调整
cass :
html, body, #app {
height: 100%;
width: 100%;
}
/*
vh，是指CSS中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度。
* */
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
height: 100vh;
}
.swiper-pagination-bullet {
width: 15px;
height: 15px;
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 8%;
}
完整的代码可以看我的github:github.com/13476075014…
