vue-awesome-swiper插件

http://www.cnblogs.com/songrimin/p/6905136.html

這個地址不錯

在上一些個人demo代碼

第一步安裝

npm install vue-awesome-swiper --save

main.js

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

 

<template>
    <div id="swiper-box">
        <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>
      <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>
    </div>
</template>
<script>

export default{
    data(){
        return{
            swiperOption:{
                pagination:'.swiper-pagination',
                paginationClickable:true,
                nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev'
                /*loop:true,
                autoplay : 2000,
                grabCursor: true*/
            }
        }
    }
}
</script>
<style scoped>
*{
    box-sizing:border-box;
}
    #swiper-box{
        width:600px;
        height:400px;
        margin:0 auto;
        position:relative;
        border:1px solid #ddd;
    }
    .swiper-container{
        width:100%;
        height:100%;
    }
    .swiper-slide{
        background:#ccc;
        border:1px solid red;
    }
</style>