I have been experimenting with jQuery to create a slide feature. However, I am encountering an issue where the next slide fades in before the previous one completely fades out when I click the next arrow. Does anyone know how to fix this problem?
<html>
<head>
<style>
#mainWrapper{
padding:10px 0 10px 0;
width:960px;
border:1px solid grey;
margin:auto;
}
#jumbotron{
height:400px;
width:500px;
margin:auto;
}
.slide{
width:400px;
margin:auto;
margin-top:100px;
display:none;
}
.active-slide{
display:block;
}
.dots{
list-style-type:none;
margin:0;
padding:0;
}
.dot{
float:left;
margin:0 10px 0 10px;
color:rgb(214,214,214);
}
.active-dot{
color:black;
}
.arrow-prev,.arrow-next,.dots{
float:left;
margin:0 20px 0 20px;
}
.slider-nav{
margin-top:10px;
position:relative;
left:125px;
}
.large{
height:200px;
width:400px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<head>
<body>
<div id ="mainWrapper" >
<div id="jumbotron">
<div class="">
<div class="slide active-slide">
<img src="desert.jpg" alt="desert" class="large"/>
</div>
<div class="slide">
<img src="tulips.jpg" alt="tulips" class="large"/>
</div>
<div class="slide">
<img src="penguins.jpg" alt="penguins" class="large"/>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
</a>
<ul class="dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.arrow-next').click(function(){
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
if (nextSlide.length === 0) {
nextSlide = $('div.slide').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
})
})
</script>
</body>
</html>