vue輪播插件vue-awesome-swiper

 

第一步安裝

npm install vue-awesome-swiper --save

第二部在main.js中引入

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

 

在組件中使用插件

<swiper :options="swiperOption"  ref="mySwiper">  
                        <!-- 這部分放你要渲染的那些內容 -->  
                        <swiper-slide v-for="item in items"> 
                            <img :src="item" class="index_img">
                        </swiper-slide>  
                        <!-- 這是輪播的小圓點 -->  
                        <div class="swiper-pagination" slot="pagination"></div>  
                    </swiper>  

import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default{
        name:'index',
        components: {  
            swiper,  
            swiperSlide  
        },  
        data() {  
            return {
                items:['../static/bg4.jpg','../static/bg5.jpg','../static/bg7.jpg'],
                swiperOption: {  
                    pagination: '.swiper-pagination',  
                    slidesPerView: 'auto',  
                    centeredSlides: true,  
                    paginationClickable: true,
                    onSlideChangeEnd: swiper => {  
                        //這個位置放swiper的回調方法  
                        this.page = swiper.realIndex+1;  
                        this.index = swiper.realIndex;  
                    },  
                }, 
                swiperSlides: [1, 2, 3, 4, 5]  
            }  
        },  
        //定義這個sweiper對象  
        computed: {  
  
            swiper() {  
              return this.$refs.mySwiper.swiper;  
            }  
        },  
        mounted () {  
            //這邊就可以使用swiper這個對象去使用swiper官網中的那些方法  
            //this.swiper.slideTo(0, 0, false);  
        }  


    }