Vue中vue-awesome-swiper，一行显示多个图片

 1、Vue中安装vue-awesome-swiper

npm install vue-awesome-swiper --save-dev

2、局部引入 

<template>
    <div class="component-style">

        <div style="width: 100%;height: 300px;">
            <swiper :options="swiperOption"
                    ref="mySwiper">

                <!-- slides -->
                <swiper-slide><img src="https://img.yzcdn.cn/vant/apple-1.jpg"
                                   alt=""
                                   class="lunbotu"></swiper-slide>
                <swiper-slide><img src="https://img.yzcdn.cn/vant/apple-2.jpg"
                                   alt=""
                                   class="lunbotu"></swiper-slide>
                <swiper-slide><img src="https://img.yzcdn.cn/vant/apple-3.jpg"
                                   alt=""
                                   class="lunbotu"></swiper-slide>
                <swiper-slide><img src="https://img.yzcdn.cn/vant/apple-4.jpg"
                                   alt=""
                                   class="lunbotu"></swiper-slide>
                <swiper-slide><img src="https://img.yzcdn.cn/vant/apple-1.jpg"
                                   alt=""
                                   class="lunbotu"></swiper-slide>
                <swiper-slide><img src="https://img.yzcdn.cn/vant/apple-2.jpg"
                                   alt=""
                                   class="lunbotu"></swiper-slide>
                <swiper-slide><img src="https://img.yzcdn.cn/vant/apple-3.jpg"
                                   alt=""
                                   class="lunbotu"></swiper-slide>
                <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div>
            </swiper>


        </div>

    </div>
</template>

<script>
  
    import { swiper, swiperSlide } from "vue-awesome-swiper";
    import 'swiper/swiper-bundle.css';

    export default {
        name: "index",
        components: {
            swiper,
            swiperSlide
        },
      
        data(){
            return{
              
                swiperOption:{
                    slidesPerView: 3,  //一行显示3个
                    spaceBetween: 30,  //间隔30
                    freeMode: true,
                    speed: 1000,   //滑动速度
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    }
                },
              
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper
            }
        },
        mounted() {
            console.log('Current Swiper instance object', this.swiper)
        },

        created(){
           
        }
    }
</script>

<style lang="scss" scoped>
 
   .lunbotu {
       width: 90%;
       height: 300px;
   }
</style>

3、效果：