Vue-Awesome-Swiper
輪播圖插件锄奢，可以同時(shí)支持Vue.js（1.X ~ 2.X）失晴，兼顧PC和移動(dòng)端，SPA和SSR拘央。
例子：https://surmon-china.github.io/vue-awesome-swiper
npm install vue-awesome-swiper--save
//importimportVue from'vue'importVueAwesomeSwiper from'vue-awesome-swiper'//orrequirevarVue =require('vue')varVueAwesomeSwiper =require('vue-awesome-swiper')//mountwithglobalVue.use(VueAwesomeSwiper)//If usedinNuxt.js/SSR, you should keep it onlyinbrowser build environment//The `Process. BROWSER_BUILD` itselfisjust a feature, itisonly validinNuxt.js, you need to modify it according to your own procedures, suchas:invue official ssr scaffolding it should be` process.browser`if(process.BROWSER_BUILD) {constVueAwesomeSwiper =require('vue-awesome-swiper/ssr')? Vue.use(VueAwesomeSwiper)}//mountwithcomponent(can't work in Nuxt.js/SSR)
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
? components: {
? ? swiper,
? ? swiperSlide
? }
}
SPA通過組件作用涂屁，需要借助ref屬性查找swiper實(shí)例
SSR通過命令作用，需要借助命令參數(shù)查找swiper實(shí)例
其他配置和事件一致
<!-- You can custom the "mySwiper" name used to find the swiper instance in current component -->exportdefault{? ? data () {return{? ? ? ? banners: ['/1.jpg','/2.jpg','/3.jpg'],? ? ? ? swiperOption: {? ? ? ? ? autoplay:5000,? ? ? ? ? initialSlide:1,? ? ? ? ? loop:true,? ? ? ? ? pagination:'.swiper-pagination',? ? ? ? ? onSlideChangeEnd: swiper => {? ? ? ? ? ? console.log('onSlideChangeEnd', swiper.realIndex)? ? ? ? ? }? ? ? ? }? ? ? }? ? },? ? mounted() {? ? ? console.log('app init')? ? ? setTimeout(() => {this.banners.push('/5.jpg')? ? ? ? console.log('banners update')? ? ? },3000)? ? ? console.log('This is current swiper instance object',this.mySwiper,'It will slideTo banners 3')this.mySwiper.slideTo(3)? ? }? }
<!-- The ref attr used to find the swiper instance --><!-- slides -->I'm Slide 1I'm Slide 2I'm Slide 3I'm Slide 4I'm Slide 5I'm Slide 6I'm Slide 7<!-- Optional controls -->// swiper options example:exportdefault{? ? name:'carrousel',? ? data() {return{? ? ? ? swiperOption: {// NotNextTick is a component's own property, and if notNextTick is set to true, the component will not instantiate the swiper through NextTick, which means you can get the swiper object the first time (if you need to use the get swiper object to do what Things, then this property must be true)// notNextTick是一個(gè)組件自有屬性灰伟，如果notNextTick設(shè)置為true拆又，組件則不會(huì)通過NextTick來實(shí)例化swiper，也就意味著你可以在第一時(shí)間獲取到swiper對(duì)象袱箱，假如你需要?jiǎng)偧虞d遍使用獲取swiper對(duì)象來做什么事遏乔，那么這個(gè)屬性一定要是truenotNextTick:true,// swiper configs 所有的配置同swiper官方api配置autoplay:3000,? ? ? ? ? direction :'vertical',? ? ? ? ? grabCursor :true,? ? ? ? ? setWrapperSize :true,? ? ? ? ? autoHeight:true,? ? ? ? ? pagination :'.swiper-pagination',? ? ? ? ? paginationClickable :true,? ? ? ? ? prevButton:'.swiper-button-prev',? ? ? ? ? nextButton:'.swiper-button-next',? ? ? ? ? scrollbar:'.swiper-scrollbar',? ? ? ? ? mousewheelControl :true,? ? ? ? ? observeParents:true,// if you need use plugins in the swiper, you can config in here like this// 如果自行設(shè)計(jì)了插件，那么插件的一些配置相關(guān)參數(shù)发笔，也應(yīng)該出現(xiàn)在這個(gè)對(duì)象中盟萨，如下debuggerdebugger:true,// swiper callbacks// swiper的各種回調(diào)函數(shù)也可以出現(xiàn)在這個(gè)對(duì)象中，和swiper官方一樣onTransitionStart(swiper){? ? ? ? ? ? console.log(swiper)? ? ? ? ? },// more Swiper configs and callbacks...// ...}? ? ? }? ? },// you can find current swiper instance object like this, while the notNextTick property value must be true// 如果你需要得到當(dāng)前的swiper對(duì)象來做一些事情了讨，你可以像下面這樣定義一個(gè)方法屬性來獲取當(dāng)前的swiper對(duì)象捻激，同時(shí)notNextTick必須為truecomputed: {? ? ? swiper() {returnthis.$refs.mySwiper.swiper? ? ? }? ? },? ? mounted() {// you can use current swiper instance object to do something(swiper methods)// 然后你就可以使用當(dāng)前上下文內(nèi)的swiper對(duì)象去做你想做的事了console.log('this is current swiper instance object',this.swiper)this.swiper.slideTo(3,1000,false)? ? }? }
I'm Slide{{slide}}exportdefault{? ? name:'carrousel',? ? data() {return{? ? ? ? swiperOption: {? ? ? ? ? autoplay:3500,? ? ? ? ? setWrapperSize :true,? ? ? ? ? pagination :'.swiper-pagination',? ? ? ? ? paginationClickable :true,? ? ? ? ? mousewheelControl :true,? ? ? ? ? observeParents:true,? ? ? ? },? ? ? ? swiperSlides: [1,2,3,4,5]? ? ? }? ? },? ? mounted() {? ? ? setInterval(() => {? ? ? ? console.log('simulate async data')letswiperSlides =this.swiperSlidesif(swiperSlides.length
移動(dòng)端例子的代碼
例子：https://github.com/surmon-china/vue-awesome-swiper/blob/master/examples/41-mobile-fullpage-example.vue
SSR例子的代碼
例子:https://github.com/surmon-china/vue-awesome-swiper/blob/master/nuxt-ssr-example
API
參考官網(wǎng)：?
http://www.swiper.com.cn/api/index.html
https://github.com/surmon-china/vue-awesome-swiper/blob/master/nuxt-ssr-example
我自己的前端學(xué)習(xí)交流群562862926，收集的一套前端教學(xué)視頻前计，全段學(xué)習(xí)路線分享給大家
