滑动背景中轮播图不显示

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是透明的，看着和没有一样

Answer 2

不知道是否是这种效果

Answer 3

想做成图一的移动端样式，轮播图左边不点击没有显示，而且存在图片长度及样式问题，和一个className的报错

<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/条套.jpg"></div>
                </div>
            </div>
        </div>
        <div class="t3">3</div>
        <div class="f4">4</div>
    </div>
 </div>

export default {
        components: {
        },
        data () {
            return {
            }
        },
        mounted() {
//获取左边大图的元素
            let b = document.querySelector(".swiper-wrap")
            //获取右边小图的所有元素
            let d = document.getElementsByClassName("swiper-img")
            let time 
            let index = 0
            //设置一个重置函数
            let a = function(){
                for(let i = 0;i < d.length;i++){
                    d[i].className = "d"
                }
            }
            //设置一个选中函数
            let aa = function(){
                //先代入重置函数
                a()
                d[index].className = "swiper-img d"
            }
            //设置启动轮播图的时间函数
            function ts(){
                time = setInterval(function(){
                    aa()
                    index++
                    b.style.backgroundImage = "url('"+[index]+".jpg')"
                    if(index == 5){
                        index = 0
                    }
                },1500); 
            }
            for(let i = 0;i < d.length; i++){
                //鼠标点击当前小图片上时触发
                d[i].onclick = function(){
                    //鼠标点击右边小图片时，轮播图变为当前点击图片
                    b.style.backgroundImage = "url('"+[i + 1]+".jpg')"
                    //鼠标点击小图片时关闭定时器并重置定时
                    a()
                    clearInterval(time)
                    index = i + 1
                    ts()
                }
            }

        },
        methods: {
        },
    }

.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;
        flex:1;
        justify-content: space-evenly;
    }
    .swiper-wrap{
        flex: 1;
        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.5s;
        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 4

下面2个样式改下

    .swiper-img img{max-width:100%}
    .swiper-wrap {
        width: auto
    }

js部分a函数设置样式有问题，ts的判断也有问题，具体看代码

            let a = function () {
                for (let i = 0; i < d.length; i++) {
                    d[i].className = "swiper-img"//////////////这里应该是重置为默认样式，上面的d为dom引用，样式改变导致d这个dom集合，变为0导致越界
                    //d[i].className = "d"
                }
            }


            //设置启动轮播图的时间函数
            function ts() {
                time = setInterval(function () {
                    aa()
                    index++
                    b.style.backgroundImage = "url('" + [index] + ".jpg')"
                    if (index == d.length) {///这里不要定死，而且定死的话也应该是4，不是5，为dom数组长度
                        index = 0
                    }
                }, 1500);
            }