Uniapp の Swiper がコンテンツを表示できない

<template>
	<view class="content">
		<swiper class="swiper"  :indicator-dots="true" :autoplay="true" :interval="2000"
						:duration="500">
						<swiper-item>
							<view class="swiper-item ">A</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">B</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">C</view>
						</swiper-item>
		</swiper>
		1234
	</view>
</template>

<script>
	export default {
		data() {
			 return {
			            background: ['color1', 'color2', 'color3'],
			            indicatorDots: true,
			            autoplay: true,
			            interval: 2000,
			            duration: 500
			        }
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.swiper {
			height: 300rpx;
			width: 100%;
			.swiper-item {
				display: block;
				height: 300rpx;
				line-height: 300rpx;

				text-align: center;
				border:1rpx solid #EC3232;
			}
		}
		
	.uni-bg-red{
     background: #EC3232;
	}	
		
</style>

表示されない理由は、スワイパーに幅を与えるためですが、これはuniappドキュメントで指定されていないため、表示されません。

レンダリング