Vue-swiper轮播图

安装命令：

npm install --save swiper

npm install --save vue-awesome-swiper

<template>

<div class="banner">

<swiper :options="swiperOption" ref="mySwiper">

<swiper-slide>

<img src="../../static/img/banner.png" class="index_img">

</swiper-slide>

<swiper-slide>

<img src="../../static/img/banner.png" class="index_img">

</swiper-slide>

</swiper>

</div>

</template>

<script>

import 'swiper/dist/css/swiper.min.css';

    import { swiper, swiperSlide } from 'vue-awesome-swiper'

    export default{

        name:'index',

        components: { 

            swiper, 

            swiperSlide 

        }, 

        data() { 

            return {

                swiperOption: { 

                    slidesPerView: 'auto', 

                    centeredSlides: true, 

                    paginationClickable: true,

                    autoplay:true,

                    loop:true

                },               

 }

}, 

        //定义这个sweiper对象 

        computed: {   

            swiper() { 

              return this.$refs.mySwiper.swiper; 

            } 

        }

    }

</script>

<style lang="less">

.banner img{

  display: block;

  width: 100%;

  height: auto;

  }

</style>