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,  //间隔30freeMode: 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、效果：