I've been working on a website that features a jumbotron with images that transition. I've searched online for solutions, but have come up empty. I know the answer is probably simple, but I just can't seem to figure it out right now.
The issue I'm facing is that the first image transition works fine - the first image fades out and the second fades in. However, the problem arises with subsequent image transitions: the current image starts to fade out, but the second image fades in at the same time. This results in a brief moment where both images are displayed simultaneously, causing the page content beneath to shift up and down.
$(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');
}.slider1 img {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 650px;
}
.slide {
display: none;
}
.activeSlide {
display: block;
}<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>