使用“white-space：nowrap”会导致div幻灯片显示问题

Question

I have an automatic JavaScript slideshow inside a section. The slideshow uses divs instead of images. When the divs are empty, the slideshow works fine, but when I put an element inside however, the whole div gets pushed down a lot into the section.

I tried moving the individual elements with by applying negative margin-top values, but it didn't work. After messing with the code, I found that when I take out white-space: nowrap from the section's CSS, the div doesn't get pushed down, but it doesn't slide anymore.

<section style="margin-top: 167px">
    <section id="home">
        <div id="home1">

        </div>
        <div id="home2">

        </div>
        <div id="home3">

        </div>
    </section>
</section>

section{
    width: 99.9%;
    height: 750px;
    margin-top: 150px;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#home{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

#home1{
    background-image: url("../img/home1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
}

#home2{
    margin-left: -4px;
    background-image: url("../img/home2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#home3{
    margin-left: -4px;
    background-image: url("../img/home3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#home div{
    display: inline-block;
    width: 100%;
    height: 100%;
}

$(document).ready(function(){
    const NUMBER_OF_SLIDES = 3;
    var slide_width = document.getElementById('home').scrollWidth / NUMBER_OF_SLIDES; 
    var slide_number = 1;

    setInterval(function(){
        if (slide_number < NUMBER_OF_SLIDES){
            $("#home").animate({
                scrollLeft: slide_width * slide_number
            },500);                 
            slide_number++; 
        }else{
            $("#home").animate({
                scrollLeft: 0
            },500);
            slide_number = 1;
        }
    }, 4500);   
});

I want to be able to put elements inside my divs without the divs being pushed down and sill have the slideshow work.

Answer 1

Probably not the best solution, but what you can do to make it work is encapsulate the content of each slide inside an absolute positioned div . Something like:

<div id="home1">
    <div class="content">Slide 1</div>
</div>
<div id="home2">
    <div class="content">Slide 2</div>
</div>
...

CSS:

#home .content {
    position: absolute;
}