插件vue-awesome-swiper(----------vue轮播图绝佳Travel项目使用)

vue-awesome-swiper

vue-awesome-swiper资源地址：轮播图github

swiper2.x官方使用文档: swiper2官方文档API

全部配置的说明文档: swiper3.x配置文档

使用：

１．先npm install依赖(我用的2.6.7版本)

npm install vue-awesome-swiper@2.6.7 --save

2.全局引入的方法:   在main.js里面加入:

import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)

ps  :还有以组件形式引入的方法(见github):

// require styles import 'swiper/dist/css/swiper.css' import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide } }

3.在组件里使用:

<template> <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <!-- slides --> <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> <!-- Optional controls --> <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: { // some swiper options/callbacks // 所有的参数同 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>

要在组件的data(){ }里面把swiperOption 选项写上所需要的内容,要循环显示: loop: true,分页:pagination

多看文档多看文档多看文档!