swiper使用如下 亲测可用
1. npm导入
//npm导入
npm install vue-awesome-swiper@3 --save-dev
vue最好使用swiper3.x版本，我也不清楚为什么，我跟百度走了很久，捣鼓了大半天，跟官网走，跟博客走，粘贴她们的代码，都是无法实现我需要的功能（一些事件都可以出来的，但是自动轮播，样式都无法生效）最后选择了3.x版本
2. Template
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<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>
</swiper>
3. javaScript
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper"
import "swiper/dist/css/swiper.css"
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
//设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
//loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。
loop: true,
//slide的切换效果，默认为"slide"（位移切换），可设置为"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）
effect: "slide",
//自动播放
autoplay: {
//自动播放时间
delay: 2000,
// 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
stopOnLastSlide: false,
//用户操作swiper之后，是否禁止autoplay。默认为true：停止。
//如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
//操作包括触碰，拖动，点击pagination等。
disableOnInteraction: false
},
//初始化时slide的索引。
initialSlide: 1,
//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
direction: "horizontal",
//滑动速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。
speed: 1000,
// 设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
grabCursor: true,
//如需要开启视差效果（相对父元素移动），设置为true并在所需要的元素上增加data-swiper-parallax属性
//感觉很麻烦 需要的移步 https://3.swiper.com.cn/api/basic/2015/0308/197.html
parallax: false,
// 如需为每个slide增加散列导航（有点像锚链接）。将hashnav设置为true，并在每个slide处增加 ## data-hash ## 属性。
// 这样当你的swiper切换时你的页面url就会加上这个属性的值了，你也可以通过进入页面时修改页面url让swiper在初始化时切换到指定的slide。
// 还有（ hashnavWatchState，history，replaceState）需要的移步https://3.swiper.com.cn/api/basic/2016/1029/317.html
hashnav: false,
// Swiper从3.0开始使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽高，在对flexbox布局的支持不是很好的浏览器中可能需要用到
setWrapperSize: true,
//虚拟位移。当你启用这个参数，Swiper除了不会移动外其他的都像平时一样运行，仅仅是不会在Wrapper上设置位移。当你想自定义一些slide切换效果时可以用。
virtualTranslate: false,
//强制Swiper的宽度，当你的 ## Swiper在隐藏状态下 ## 初始化时才用得上。这个参数会使自适应失效。
// width: 200,
//强制Swiper的高度，当你的 ## Swiper在隐藏状态下 ## 初始化时才用得上。这个参数会使自适应失效
// height: 200,
// 自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。 好东西！
autoHeight: true,
//设为true时，可以在slide上（或其他元素）增加类名'swiper-no-swiping'，使该slide无法拖动，希望文字被选中时可以考虑使用。该类名可通过noSwipingClass修改。
noSwiping: false,
// 显示分页
pagination: {
//元素
el: ".swiper-pagination",
//允许分页点击跳转
clickable: true,
//分页器样式类型，可选 ‘bullets’ 圆点（默认）‘fraction’ 分式 ‘progress’ 进度条 ‘custom’ 自定义
type: "fraction"
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log("this is current swiper instance object", this.swiper)
// this.swiper.slideTo(3, 1000, false);
}
}
配置如上 大部分属性我都是测过的 应该都是没问题的 常用的大概就是这些 如果您需要的上面没有可以移步swiper查看
