1.安装下载

官网

  1. npm install swiper vue-awesome-swiper --save

2.引入

引入awesome-swiper
支持全局引入和在组件中引入2种方式，如果项目中只有一个轮播的话推荐在组件中引入，有多个轮播则推荐在全局中引入。
（1）全局引入方式，在main.js中添加以下代码

  1. import VueAwesomeSwiper from 'vue-awesome-swiper'
  3. // import style
  4.  import 'swiper/swiper-bundle.css'//脚手架3对应的css样式引入
  6. Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

(2).局部引入方式,在当个组件中引入

  1. import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
  2. import 'swiper/css/swiper.css'
  4. export default {
  5.   components: {
  6.     Swiper,
  7.     SwiperSlide
  8.   },
  9.   directives: {
  10.     swiper: directive
  11.   }
  12. }

3.使用

  1.  <div class="swiper">
  2.     <swiper :options="swiperOption" class="swiper-menu">
  3.       <!-- slides 列表项 -->
  4.       <swiper-slide>
  5.         <img src="../assets/images/banner1.jpg" alt />
  6.       </swiper-slide>
  7.       <swiper-slide>
  8.         <img src="../assets/images/banner2.jpg" alt />
  9.       </swiper-slide>
  10.       <swiper-slide>
  11.         <img src="../assets/images/banner3.jpg" alt />
  12.       </swiper-slide>
  13.         <div class="swiper-button-prev" slot="button-prev"></div>
  14.          <div class="swiper-button-next" slot="button-next"></div>
  15.       <div class="swiper-scrollbar" slot="scrollbar"></div>
  16.       <div class="swiper-pagination change" slot="pagination"></div> 
  17.     </swiper>
  18.   </div>
  1.  data() {
  2.     return {
  3.       swiperOption: {
  4.         initialSlide: 0,
  5.         notNextTick: true,
  6.         loop: true, // 是否循环轮播
  7.      　　autoplay: {
  8. 　　　　delay: 2000,
  9. 　　disableOnInteraction: false
  10. 　　},
  12.         //滑动速度
  14.         speed: 2000,
  16.         //滑动方向
  18.         direction: "horizontal",
  19.         //小手掌抓取滑动
  20.    pagination:'.swiper-pagination',//这里修改
  21.         grabCursor: true,
  22.        prevButton: ".swiper-button-prev",
  23.       nextButton: ".swiper-button-next",
  24.          paginationClickable: true,
  25.           mousewheelControl: true
  26.       }
  27.     };
  28.   },
  1.   mounted () {
  2.       // 这边就可以使用swiper这个对象去使用swiper官网中的那些方法
  3.       this.swiper.slideTo(1, 1000, false)
  4.     },
  5.   computed: {
  6.     swiper () {
  7.         return this.$refs.mySwiper.swiper
  8.       }
  9.   },