vue 注册全局swiper_Vue-swiper插件

以下是项目中使用swiper插件的基本使用以及常见问题

步骤：安装 ：cnpm i -S vue-awesome-swiper@3.1.3(swiper插件)swiper@5.2.0

全局引入：import VueAwesomeSwiper from 'vue-awesome-swiper';

import 'swiper/css/swiper.css'//有时候会报错，找node_modules文件夹

Vue.use( VueAwesomeSwiper )

3.在组件中配置：

export default {

data(){

return {

swiperOption:{

//显示分页

pagination: {

el: '.swiper-pagination'

},

//设置点击箭头

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev'

},

//自动轮播

autoplay: {

delay: 2000,

//当用户滑动图片后继续自动轮播

disableOnInteraction: false,

},

//开启循环模式

loop: true

},

carouselArr : [1,2,3]

}

}

}

【注意】：this.$ref.mySwiper.swiper.slideTo(index,1000,false)可以配置点击哪个slider切换对应的图片

在js中引入资源需要使用 require("../xxx")