vue 2的swiper的使用
时间: 2024-04-22 11:17:22 浏览: 8
要使用vue2的swiper,需要先安装swiper和vue-awesome-swiper两个依赖包。安装命令如下:
```
npm install swiper vue-awesome-swiper --save
```
然后在需要使用swiper的组件中,引入vue-awesome-swiper,并在组件中注册:
```javascript
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)
```
接着,在组件的template中,使用swiper的标签和属性来配置swiper:
```html
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</template>
<script>
export default {
data() {
return {
swiperOption: {
pagination: {
el: '.swiper-pagination',
},
},
}
},
}
</script>
```
以上代码中,我们定义了一个swiper-container容器,其中包含了三个swiper-slide,同时添加了一个pagination分页器。