Uniapp的Swiper无法显示内容

使用了Uniapp官网上的Swiper组件案例代码，但是Swiper标签内的所有内容无法显示。

//index.vue文件  

<template>  
    <view  class='content'>  
        <view class="uni-padding-wrap">  
            <view class="page-section swiper">  
                <view class="page-section-spacing">  
                    <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">  
                        <swiper-item>  
                            <view class="swiper-item uni-bg-red">A</view>  
                        </swiper-item>  
                        <swiper-item>  
                            <view class="swiper-item uni-bg-green">B</view>  
                        </swiper-item>  
                        <swiper-item>  
                            <view class="swiper-item uni-bg-blue">C</view>  
                        </swiper-item>  
                    </swiper>  
                </view>  
            </view>  
        </view>  
        <view class="swiper-list">  
            <view class="uni-list-cell uni-list-cell-pd">  
                <view class="uni-list-cell-db">指示点</view>  
                <switch :checked="indicatorDots" @change="changeIndicatorDots" />  
            </view>  
            <view class="uni-list-cell uni-list-cell-pd">  
                <view class="uni-list-cell-db">自动播放</view>  
                <switch :checked="autoplay" @change="changeAutoplay" />  
            </view>  
        </view>  
        <view class="uni-padding-wrap">  
            <view class="uni-common-mt">  
                <text>幻灯片切换时长(ms)</text>  
                <text class="info">{{duration}}</text>  
            </view>  
            <slider @change="durationChange" :value="duration" min="500" max="2000" />  
            <view class="uni-common-mt">  
                <text>自动播放间隔时长(ms)</text>  
                <text class="info">{{interval}}</text>  
            </view>  
            <slider @change="intervalChange" :value="interval" min="2000" max="10000" />  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            background: ['color1', 'color2', 'color3'],  
            indicatorDots: true,  
            autoplay: true,  
            interval: 2000,  
            duration: 500  
        }  
    },  
    methods: {  
        changeIndicatorDots(e) {  
            this.indicatorDots = !this.indicatorDots  
        },  
        changeAutoplay(e) {  
            this.autoplay = !this.autoplay  
        },  
        intervalChange(e) {  
            this.interval = e.target.value  
        },  
        durationChange(e) {  
            this.duration = e.target.value  
        }  
    }  
}  
</script>  

<style>  
//轮播图高度自动    
.content {    
    width: auto;    
}    
.swiper {    
  height: auto;    
}    
.uni-swiper-wrapper {    
  overflow: auto!important;    
}    
.swiper-item {    
  width: auto!important;    
  height: auto!important;    

}  
</style>

另外，网上也有朋友遇到类似问题。
https://blog.csdn.net/weixin_45727837/article/details/124640025