幻灯片显示下面的其他幻灯片(Slideshow shows the other slide underneath)

 我目前有这个滑块，但是当我加载网站时，我可以看到其他幻灯片在上面。 然后加载2秒钟，然后消失，幻灯片播放开始并流畅运行。 
 
 我似乎无法弄清楚是什么原因造成的。 如果有人能帮助我，那会很棒。 
 
 这是我的JAVASCRIPT，CSS和HTML： 
 
 
 
 
 
  
$("#slideshow > div:gt(0)").hide();

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(0)
    .next()
    .fadeIn(0)
    .end()
    .appendTo('#slideshow');
},  4000);
 
  
#slideshow {
    position: relative;
    width: 100%;
    margin-top: -10px;
}

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

#slideshow {
  margin-top: 35px;
  background-image: url('../images/Untitled-1.jpg');
  height: 360px;
  background-size: cover;
  background-repeat: no-repeat;
}

.banner_columns {
    display: flex;
}

.img {
  margin-top: -35px;
  margin-left: 190px;
}

.column {
  flex: 1;
}

.column-one {
    order: 1;
}

.column-two {
    order: 2;
    margin-top: 100px;
    margin-left: -100px;
}

.header1 {
  color: #1e1e1c;
  font-size: 19px;
  line-height: 24px;
  font-weight: 700;
  font-style: italic;
}

.p {
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 300;
}

.button1 {
  color: #fff;
  font-size: 15px;
  margin-left: 8px;
  padding: 3px 30px;
  background-color: #b52323;
  font-weight: 700;
  text-decoration: none;
}

.button_1 {
  color: #fff;
  font-size: 15px;
  padding: 3px 30px;
  background-color: #b52323;
  font-weight: 700;
  text-decoration: none;
}

.button2 {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  padding: 3px 22px;
  background-color: #656565;
  text-decoration: none;
}
 
  
<div id="slideshow">
<div class="bgbanner">
  <div class="banner_columns1">
    <div class="column column-one">
      <div class="banner">
        <img class="img" src="images/Bog-til-hjemmeside2.png" width="380">
      </div>
    </div>
    <div class="column column-two">
      <h1 class="header1">“Velfungerende roman, der effektivt skifter <br>mellem krigstraumer, flugt og bekymringer. <br>En hæderlig bog om den værste krig i EU.”</h1>
      <p class="p">- Kristeligt Dagblad, 2013</p>
      <a class="button_1" href="https://www.saxo.com/dk/knacker_karsten-skov_haeftet_9788792975102">Køb nu</a>
    </div>
  </div>
</div>
<div class="bgbanner">
  <div class="banner_columns1">
    <div class="column column-one">
      <div class="banner">
        <img class="img" src="images/Bog-til-hjemmeside.png" width="380">
      </div>
    </div>
    <div class="column column-two">
      <h1 class="header1">“Velfungerende roman, der effektivt skifter <br>mellem krigstraumer, flugt og bekymringer. <br>En hæderlig bog om den værste krig i EU.”</h1>
      <p class="p">- Kristeligt Dagblad, 2013</p>
      <a class="button2" href="bibliografi_knacker.html">Læs mere...</a>
      <a class="button1" href="https://www.saxo.com/dk/knacker_karsten-skov_haeftet_9788792975102">Køb nu</a>
    </div>
  </div>
</div>
</div>
 
 
 
 
 
 提前致谢！ 

I currently have this slider, but when i load the website, I can see the other slide on top. Then for 2 secs it loads, and then it disappears and the slideshow starts and works fluently.
 
I can't seem to figure out what is causing it. Would be great if someone could help me out.
 
Here is my JAVASCRIPT, CSS & HTML:
 
 
 
 
 
  
$("#slideshow > div:gt(0)").hide();

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(0)
    .next()
    .fadeIn(0)
    .end()
    .appendTo('#slideshow');
},  4000);
 
  
#slideshow {
    position: relative;
    width: 100%;
    margin-top: -10px;
}

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

#slideshow {
  margin-top: 35px;
  background-image: url('../images/Untitled-1.jpg');
  height: 360px;
  background-size: cover;
  background-repeat: no-repeat;
}

.banner_columns {
    display: flex;
}

.img {
  margin-top: -35px;
  margin-left: 190px;
}

.column {
  flex: 1;
}

.column-one {
    order: 1;
}

.column-two {
    order: 2;
    margin-top: 100px;
    margin-left: -100px;
}

.header1 {
  color: #1e1e1c;
  font-size: 19px;
  line-height: 24px;
  font-weight: 700;
  font-style: italic;
}

.p {
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 300;
}

.button1 {
  color: #fff;
  font-size: 15px;
  margin-left: 8px;
  padding: 3px 30px;
  background-color: #b52323;
  font-weight: 700;
  text-decoration: none;
}

.button_1 {
  color: #fff;
  font-size: 15px;
  padding: 3px 30px;
  background-color: #b52323;
  font-weight: 700;
  text-decoration: none;
}

.button2 {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  padding: 3px 22px;
  background-color: #656565;
  text-decoration: none;
}
 
  
<div id="slideshow">
<div class="bgbanner">
  <div class="banner_columns1">
    <div class="column column-one">
      <div class="banner">
        <img class="img" src="images/Bog-til-hjemmeside2.png" width="380">
      </div>
    </div>
    <div class="column column-two">
      <h1 class="header1">“Velfungerende roman, der effektivt skifter <br>mellem krigstraumer, flugt og bekymringer. <br>En hæderlig bog om den værste krig i EU.”</h1>
      <p class="p">- Kristeligt Dagblad, 2013</p>
      <a class="button_1" href="https://www.saxo.com/dk/knacker_karsten-skov_haeftet_9788792975102">Køb nu</a>
    </div>
  </div>
</div>
<div class="bgbanner">
  <div class="banner_columns1">
    <div class="column column-one">
      <div class="banner">
        <img class="img" src="images/Bog-til-hjemmeside.png" width="380">
      </div>
    </div>
    <div class="column column-two">
      <h1 class="header1">“Velfungerende roman, der effektivt skifter <br>mellem krigstraumer, flugt og bekymringer. <br>En hæderlig bog om den værste krig i EU.”</h1>
      <p class="p">- Kristeligt Dagblad, 2013</p>
      <a class="button2" href="bibliografi_knacker.html">Læs mere...</a>
      <a class="button1" href="https://www.saxo.com/dk/knacker_karsten-skov_haeftet_9788792975102">Køb nu</a>
    </div>
  </div>
</div>
</div>
 
 
 
 
 
Thanks in advance!

原文：https://stackoverflow.com/questions/41143047