vue轮播插件vue-awesome-swiper

https://surmon-china.github.io/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);
        }  

    }