swiper插件使用方法

第一步   安装

            npm install vue-awesome-swiper --save

第二步   找到mian.js文件安装

            import 'swiper/dist/css/swiper.css'

第三步   复制下面的代码生成

 

<template>
  <div class="scroll">
    
    <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 swiper-button-black" slot="button-prev"></div>
        <div class="swiper-button-next swiper-button-black" slot="button-next"></div>
      </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'  
export default {
  name: 'HelloWorld',
  components: {  
      swiper,  
      swiperSlide  
  },  
  data () {
    return {
       swiperOption: {
          slidesPerView: 3,
          spaceBetween: 30,
          // effect : 'flip',
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          //左右点击
          navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
          }
        }
    }
  },
  computed: {  
  }, 
  mounted () {  
    //可以使用swiper这个对象去使用swiper官网中的那些方法  
     console.log('this is current swiper instance object', this.swiper);
      // this.swiper.slideTo(0, 0, false);
  }   
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>