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
? }
}
三暖途、實(shí)現(xiàn)
五卑惜、基本屬性介紹
autoplay:? ? 自動(dòng)切換的時(shí)間間隔（單位ms），不設(shè)定該參數(shù)slide不會(huì)自動(dòng)切換
loop：設(shè)置為true 則開(kāi)啟loop模式驻售。loop模式：會(huì)在原本slide前后復(fù)制若干個(gè)slide(默認(rèn)一個(gè))并在合適的時(shí)候切換露久，讓Swiper看起來(lái)是循環(huán)的
grabCursor:??設(shè)置為true時(shí)，鼠標(biāo)覆蓋Swiper時(shí)指針會(huì)變成手掌形狀欺栗，拖動(dòng)時(shí)指針會(huì)變成抓手形狀
direction:? Slides的滑動(dòng)方向毫痕，可設(shè)置水平(horizontal)或垂直(vertical),默認(rèn)為horizontal
pagination:??分頁(yè)器容器的css選擇器或HTML標(biāo)簽
paginationType:??分頁(yè)器樣式類(lèi)型,可選 'bullets' 原點(diǎn)（默認(rèn)）、'fraction' 分式迟几、'progress' 進(jìn)度條消请、'custom' 自定義
paginationClickable:??此參數(shù)設(shè)置為true時(shí)，點(diǎn)擊分頁(yè)器的指示點(diǎn)分頁(yè)器會(huì)控制Swiper切換
mousewheelControl：? 是否開(kāi)啟鼠標(biāo)控制Swiper切換类腮，設(shè)置為true時(shí)臊泰，能使用鼠標(biāo)滾輪控制slide滑動(dòng)
更多詳情查看官網(wǎng)屬性介紹??http://www.swiper.com.cn/api/Observer/2015/0308/219.html
