Vue-awesome-swiper

Vue-awesome-swiper的基本使用

---

一、安装

$ npm/cnpm install vue-awesome-swiper

二、引入

1、CDN（不需npm）

<link ref="stylesheet" href="path/to/swiper/dist/css/swiper.css"/>

<script type="text/javascript" src="path/to/swiper.js"></script>

<script type="text/javascript" src="path/to/vue.min.js"></script>

<script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script>

<script type="text/javascript">

  Vue.use(window.VueAwesomeSwiper)

</script>

2、全局

（main.js）

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'

import  'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

3、组件

import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {

  components: {

    swiper,

    swiperSlide

  }

}

三、实现

五、基本属性介绍

autoplay:    自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换

loop：设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的

grabCursor:  设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状

direction:  Slides的滑动方向，可设置水平(horizontal)或垂直(vertical),默认为horizontal

pagination:  分页器容器的css选择器或HTML标签

paginationType:  分页器样式类型,可选 'bullets' 原点（默认）、'fraction' 分式、'progress' 进度条、'custom' 自定义

paginationClickable:  此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换

mousewheelControl：  是否开启鼠标控制Swiper切换，设置为true时，能使用鼠标滚轮控制slide滑动

更多详情查看官网属性介绍  http://www.swiper.com.cn/api/Observer/2015/0308/219.html