Slideshow shows the other slide underneath

Question

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!

Answer 1

Just add this to the CSS

#slideshow > div:not(:first-child) {
  display: none;
}

and remove

$("#slideshow > div:gt(0)").hide();

which is kicking in too late

$(function() {
  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;
}
#slideshow > div:not(:first-child) {
  display: none;
}
.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;
}

<base href="http://jakobhoeg.com/projekta/"/><!-- remove this before using -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>