qjm/pages/product/common/topSwiper.vue

<template>
	<view class="carousel">
		<swiper indicator-dots :circular="true" duration="400">
			<swiper-item class="swiper-item" v-if="video">
				<video class="image-wrapper" :src="video"></video>
			</swiper-item>
			<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
				<view class="image-wrapper">
					<image :src="item" class="loaded" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			imgList: {
				type: Array,
				default: function() {
					return []
				}
			},
			video: {
				type: String,
				default: function() {
					return ''
				}
			},
		},
		data() {
			return {

			};
		},
	};
</script>

<style lang="scss">
	.carousel {
		/* #ifdef APP-PLUS */
		padding-top: var(--status-bar-height);
		/* #endif */
		height: 700rpx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 700rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>