swiper官网API接口文档
swiper官网中给出的"在vue中使用swiper教程"
第一步:
在项目文件夹中用"shift+鼠标右键"召唤出命令行工具,然后输入:npm install vue-awesome-swiper --save
,安装好vue中使用过的swiper
第二步:
在main.js
文件中全局引入:
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 同时必须引入css样式文件
import 'swiper/dist/css/swiper.css'
// 挂载到vue全局上
Vue.use(VueAwesomeSwiper)
或者只想单独在某个组件中引入:
// 同样引入样式文件
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
第三步:
使用swiper:
<template>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- 轮播块 -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</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>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
loop: true,// true循环轮播;false不循环轮播
autoplay: true,// true自动播放;false不自动播放
pagination: {
el: ".swiper-pagination",// 分页器
}
// 其他的所有的参数同 swiper 官方 api 参数
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log('this is current swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
</script>