vue中使用轮播插件vue-awesome-swiper 例子

vue项目中用到了，这里记录下

1.先安装插件 npm install vue-awesome-swiper –save

2.全局引用(main.js)

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css' 
Vue.use(VueAwesomeSwiper)

3.模板上引用

<template>
<div style="width:400px;height:300px">
  <swiper :options="swiperOption">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
        <swiper-slide>Slide 6</swiper-slide>
        <swiper-slide>Slide 7</swiper-slide>
        <swiper-slide>Slide 8</swiper-slide>
        <swiper-slide>Slide 9</swiper-slide>
        <swiper-slide>Slide 10</swiper-slide>
        <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>
   </swiper>
</div>
</template>
<script>
  import { swiper, swiperSlide} from 'vue-awesome-swiper'
   export default {  
         data() {  
            return { 
                 swiperOption: {
                    pagination: {
                        el: '.swiper-pagination',
                        type: 'fraction'
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                  } 
            }  
        },
        components: {
            swiper,
            swiperSlide
        }

    }
</script>
<style>

    .swiper-container {
      width: 100%;
      height: 100%; 
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #ddd;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  </style>

效果图如下：