vue使用swiper

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
1.首先需要安装
cnpm install swiper vue-awesome-swiper --save

2.在main.js中导入
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3.在组件中使用
#在mounted中进行实例化
import 'swiper/swiper-bundle.css' #导入样式，也可以在main.js中导入，代表全局

mounted() {
    this.$swiper = new Swiper('.swiper-container', {
		#这里写配置的各种属性
        slidesPerView: 'auto', #一个页面中显示几个
        virtual: true,
        // loop: true, #是否开启循环
        slidesPerGroup : 3, #按几个分为一组
        watchSlidesProgress : true, #监听进度
        navigation: { #前后按钮组件
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })
}