滑动背景中轮播图不显示

Question

问题遇到的现象和发生背景

写一个移动端的滑动背景，现在想在背景2上加一个轮播图，但是轮播图无法显示，一开始猜测是背景颜色遮盖了轮播图，但为轮播图div加上z-index，又尝试去除背景颜色，轮播图还是不显示

用代码块功能插入代码，请勿粘贴截图

<div class="propa">
<div class="container">
        <div class="f1">1</div>
        <div class="s2">
            <div class="swiper-text">
                <div class="swiper-wrap"></div>
                <div class="swiper">
                    <div class="swiper-img-d"><img src="@/common/image/123.png"></div>
                    <div class="swiper-img"><img src="@/common/image/周杰伦_我是如此相信_4.jpg"></div>
                    <div class="swiper-img"><img src="@/common/image/彩珠.jpg"></div>
                    <div class="swiper-img"><img src="@/common/image/2.jpg"></div>
                </div>
            </div>
        </div>
        <div class="t3">3</div>
        <div class="f4">4</div>
    </div>
 </div>

.propa{
        margin:0;
        padding: 0;
        overflow-x:hidden ;
    }
 .container{
        width: 100vw;
        height: 100vh;
        scroll-snap-type: y mandatory;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .container .f1{
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: gold;
        color:#fff;
        scroll-snap-align: start;
    }
    .container .s2{
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: gold;
        color:#fff;
        scroll-snap-align: start;
    }
    .container .t3{
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: gold;
        color:#fff;
        scroll-snap-align: start;
    }
    .container .f4{
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: gold;
        color:#fff;
        scroll-snap-align: start;
    }
    .swiper-text{
        position: relative;
        width: 10rem;
        display: flex;
        justify-content: space-evenly;
        z-index:99;
    }
    .swiper-wrap{
        width: 25rem;
        height: 31rem;
        transition: .4s;
        background-size: cover;
    }
    .swiper{
        width: 3rem;
        height: 7.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .swiper-img{
        position:relative;
        width:3rem;
        height:1rem;
        right:0;
        transition: 0.1rem;
        overflow: hidden;
    }
    .swiper-img .img{
        position: absolute;
        width: 3rem;
        transform: translate(0,-0.5rem);
        transition: .5s;
        right: 0;
    }
    .swiper-img-d{
        opacity: 0;
        right: 3.8rem;
    }
    .swiper-img:hover img{
        opacity: 0;
        right: 7.8rem;
    }

Answer 1

结构是不是搞错了？swiper应该是在swiper-wrap容器里面吧？

而且宽度设置也是有问题。。
.swiper-text应该是flex:1，去掉width，不去掉也行
.swiper-wrap加上flex:1
而且显示的第一张图片样式是swiper-img-d，opacity:0是透明的，看着和没有一样