动态swiper 循环 （vue-awesome-swiper）

使用 data 赋值才能动态传数据，否则使用另一篇文章 “ swiper组件 ”
注意：这里使用 “ vue-awesome-swiper ” 组件，一定要用 v- if 判断数据，否则不加载！

<template>
	<div class="swiperHandClass">
		<swiper v-if="omsg.length" :options="swiperOptions">
			<swiper-slide v-for="(item, index) in omsg" :key="index" class="swiper-slide">
				<img :src="item.partnerLogo" alt="" />
			</swiper-slide>
		</swiper>
	</div>
</template>

<script>
	//导入样式
	import "swiper/swiper-bundle.min.css";
	// 导入swiper组件
	import {
		Swiper,
		SwiperSlide
	} from "vue-awesome-swiper";
	// 使用swiper6的模组扩展
	import SwiperCore, {
		Navigation,
		Controller,
		Autoplay
	} from "swiper";
	//注册模块
	SwiperCore.use([Navigation, Controller, Autoplay]);

	export default {
		name: "SwiperDemo",
		components: {
			Swiper,
			SwiperSlide
		},
		props: ["omsg"],
		computed: {
			this_lisdeNum() {
				return this.omsg;
			}
		},
		data() {
			return {
				swiperOptions: {
					loop: true,
					spaceBetween: 20,
					grabCursor: true,
					slidesPerView: "auto", //在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
					centeredSlides: true //设定为true时，
				}
			};
		}
	};
</script>

<style lang="less">
	.swiperHandClass {
		.swiper-slide {
			width: 100px !important;
			height: 100px !important;
			// margin: 0 8px;
			border-radius: 50%;
			overflow: hidden;
			opacity: 0.5;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.swiper-slide-prev,
		.swiper-slide-next,
		.swiper-slide-active {
			opacity: 1;
		}
	}
</style>