I am building a site that has a jumbotron with some images changing. I've tried to look answers on the internet, but I couldn't find any. Also, i know that the answer will be something easy, but I can't see it for now.

The problem is that the first image swap goes well, first image fades out and the second fades in. But it breaks down after this. Every next image swap goes like this: current image starts to fade out, but the second one fades in in the same time, meaning that for a moment there are two images displayed at once and whole page beneath them gets pushed down and then up.

```js
$(document).ready(function(){

 window.setInterval(sliduh1, 3000);

 var slide = $('.activeSlide');

});

function sliduh1() {
  var currentSlide = $('.activeSlide');
  var nextSlide = currentSlide.next();

  if (nextSlide.length === 0 ) {
   nextSlide = $('.slide').first();
  }

  currentSlide.fadeOut(600).removeClass('activeSlide');
  nextSlide.fadeIn(600).addClass('activeSlide');
}
```

```css
.slider1 img {
 position: relative;
 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 650px;
}
.slide {
 display: none;
}
.activeSlide {
display: block;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider1">
 <div class="slide activeSlide">
  <img src="imgs/mobile1.png">
 </div>
 <div class="slide">
  <img src="imgs/blueprints1.jpg">
 </div>
 <div class="slide">
  <img src="imgs/tools1.png">
 </div>
 <div class="slide">
  <img src="imgs/sourceCode1.png">
 </div>
 <div class="slide">
  <img src="imgs/vr1.jpg">
 </div>
 <div class="slide">
  <img src="imgs/market1.png">
 </div>
</div>
```