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>
来源: http://www.jianshu.com/p/c3460b5ce18e