Vue实现swiper轮播

https://www.npmjs.com/package/vue-awesome-swiper
以上是npm安装swiper插件的网址

找

NPM

下的 npm install vue-awesome-swiper --save 进行安装

spa

<!-- The ref attr used to find the swiper instance -->
<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>

在

	swiperOption: {
     		//https://www.swiper.com.cn/api/index.html   Api文档的地址
 	   }

中比如写loop: true, autopaly:{delay:1000}
环路和切换速度

报错的话，底下留言跟我说！