vue-awesome-swiper
vue-awesome-swiper資源地址:輪播圖github
swiper2.x官方使用文檔: swiper2官方文檔API
全部配置的說明文檔: swiper3.x配置文檔
使用:
1.先npm install依賴(我用的2.6.7版本)
npm install [email protected] --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
多看文檔多看文檔多看文檔!