javascript - 由于没有执行 .appendChild，图像的可见性没有响应

Question

在我创建的幻灯片元素的 appendChild 之后，我无法弄清楚为什么它不显示图像并执行代码......它在我的控制台中没有显示任何错误，但不显示我设置的图像. 我认为我的 CSS 很好，但我需要进一步确认，以防有东西阻碍了它的可见性......请有人帮我解决这个问题。

const nxt_btn = document.querySelector('#next');
const prev_btn = document.querySelector('#prev');
const slider = document.querySelector('.slider');
let first_slide;
let last_slide;

let projects = [
    {
        title:'Project 1',
        type:'website',
        content:'Anything that comes to my mind to write',
        image:'./images/slider-1.jpg'
    },
    {
        title:'Project 2',
        type:'app',
        content:'Anything that comes to my mind to write',
        image:'./images/slider-2.jpg'
    },
    {
        title:'Project 3',
        type:'game',
        content:'Anything that comes to my mind to write',
        image:'./images/slider-3.jpeg'
    }
]

projects.forEach[({title, type, content, image} , i) => {
    const slide = document.createElement('div');
    slide.classList.add('slider_slide');
    slide.style.backgroundImage = "url( '" + projects[0].image + "' )";
    
    if (i==0) {
        first_slide = slide;

        slide.classList.add('active');
    }else if(i + 1 == projects.length){
        last_slide = slide;
    }

    // const slide_content = document.createElement('div');
    // slide_content.classList.add('slide_content');
    slider.appendChild(slide);
}];

我不确定我的CSS代码是否阻碍了它的可见性，但这些我的代码......一个在 sass 中，在 CSS 中输出......

SASS/SCSS

body{
    margin: 0px;
    padding: 0px;
    background: white;
    font-family: 'Roboto', Helvetica, sans-serif;
}

.page{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-flow: column;
}

.header{
    width: 100vw;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #171717;

    &_title{
        color: lightblue;
        font-size: 20px;
        font-weight: 900;

        span{
            font-weight: 300;

        }
    }
}
.main{
    flex: 1;
    overflow: scroll;
    
    .slider{
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;

        &_slide{
            position: absolute;
            transform: translateY(-100%);
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            opacity: 0;
            transition: transform 0.5s ease-in-out, opacity 0.5s linear;
            background-position: center center;
            background-size: cover;
    
            &.active{
                opacity: 1;
                transform:translateY(0%);
            }
        }
        &_btns{
            position: absolute;
            z-index: 999;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            padding: 15px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;

            .slider_btn{
                width: 35px;
                height: 35px;
                color: lightblue;
                font-size: 20px;
                line-height: 35px;
                text-align: center;
                font-weight: 300;
                border-radius: 50%;
                background: none;
                border: 1px solid lightblue;
                cursor: pointer;
                transition: background 0.2s linear, color 0.2 ease-out;

                &:hover{
                    background: lightblue;
                    color: #171717;
                }
            }
        }
    }

    
   
}

CSS

body {
  margin: 0px;
  padding: 0px;
  background: white;
  font-family: "Roboto", Helvetica, sans-serif;
}

.page {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-flow: column;
}

.header {
  width: 100vw;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #171717;
}
.header_title {
  color: lightblue;
  font-size: 20px;
  font-weight: 900;
}
.header_title span {
  font-weight: 300;
}

.main {
  flex: 1;
  overflow: scroll;
}
.main .slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.main .slider_slide {
  position: absolute;
  transform: translateY(-100%);
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s linear;
  background-position: center center;
  background-size: cover;
}
.main .slider_slide.active {
  opacity: 1;
  transform: translateY(0%);
}
.main .slider_btns {
  position: absolute;
  z-index: 999;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.main .slider_btns .slider_btn {
  width: 35px;
  height: 35px;
  color: lightblue;
  font-size: 20px;
  line-height: 35px;
  text-align: center;
  font-weight: 300;
  border-radius: 50%;
  background: none;
  border: 1px solid lightblue;
  cursor: pointer;
  transition: background 0.2s linear, color 0.2 ease-out;
}
.main .slider_btns .slider_btn:hover {
  background: lightblue;
  color: #171717;
}

/*# sourceMappingURL=slider.css.map */

标签： javascriptcsssass