vue-awesome-swiper
vue-awesome-swiper资源地址:轮播图github
swiper2.x官方使用文档: swiper2官方文档API
全部配置的说明文档: swiper3.x配置文档
使用:
1.先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
多看文档多看文档多看文档!