How can I make the h4 tags fade in after the divs slide into view, while also adding the class "current" to each visible slide? Check out the example on JSFiddle here.
<div class="slider">
<div class="slides">
<div class="slide slide-1">
<h4>Slide 1</h4>
</div>
<div class="slide slide-2">
<h4>slide 2</h4>
</div>
<div class="slide slide-3">
<h4>slide 3</h4>
</div>
<div class="slide slide-4">
<h4>slide 4</h4>
</div>
<div class="slide slide-1">
<h4>Slide 1</h4>
</div>
</div><!-- end homepage slider container -->
CSS:
.slider{
width: 550px;
background: #d00d00;
min-height: 385px;
overflow: hidden;
}
.slides{
width: 2750px;
margin: 0;
}
.slide{
position:relative;
display: block;
float: left;
width: 550px;
height:400px;
}
.slide-1{
background:#dedede;
}
.slide-2{
background:#999;
}
.slide-3{
background:#333;
}
.slide-4{
background:#555;
}
h4{
background:#bada55;
padding:15px 120px;
display: inline-block;
margin-top:30%;
font-size:1.4em;
}
jQuery:
$(document).ready(function(){
var width = 550;
var speed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $(".slider");
var $slides = $slider.find('.slides');
var $slide = $slider.find('.slide');
$slide.first().addClass('current');
setInterval(function(){
$slides.animate({'margin-left': '-='+ width}, speed, function(){
currentSlide++;
if (currentSlide === $slide.length) {
currentSlide = 1;
$slides.css('margin-left', 0);
}
});
}, pause);
});