I have successfully created a custom jQuery slideshow that functions as intended. The only remaining task is to animate the caption within each slide. I would like each caption to correspond with its respective slide, but currently all of the captions respond regardless of which slide is displayed. I am struggling to troubleshoot and resolve this issue.
<body>
<div class="marquee_container">
<div class="holder">
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/london.jpg" alt="London" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/milan.jpg" alt="Milan" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/staugustine.jpg" alt="St Augustine" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
<div class="marquee_nav">
</div>
</div>
</body>
</html>
CSS
.marquee_container {
width: 700px;
height: 350px;
overflow: hidden;
margin: 0px 0px 30px 0px;
padding: 0px;
position:relative;
}
.holder{
overflow: hidden;
position: relative;
width: 9999px;
height: 350px;
}
.slide{
width: 700px;
float: left;
position:relative;
}
.marquee_photos {
overflow:hidden;
}
.marquee_photos img{
display:block;
}
.marquee_caption {
width: 700px;
margin: 0px;
padding: 15px 0px 10px 0px;
color: #fff;
position: absolute;
top: 350px;
left: 0px;
background: url(images/template/marquee_caption.png) 0px 0px;
}
.marquee_caption_content {
width: 410px;
padding: 0px 0px 0px 25px;
}
.marquee_nav{
position:absolute;
bottom:5px;
right:0;
}
.marquee_nav .marquee_nav_item{
color:#fff;
text-decoration:none;
background:url(images/template/nav_buttons.png) no-repeat;
text-indent:-9999px;
overflow:hidden;
display:block;
width:17px;
height:18px;
float:left;
margin:0 4px;
}
.marquee_nav .marquee_nav_item:hover{
background:url(images/template/nav_buttons.png) no-repeat -25px 0;
}
.marquee_nav .marquee_nav_item.selected{
background:url(images/template/nav_buttons.png) no-repeat -50px 0;
}
JQUERY
$(document).ready(function(){
//1st STEP
// Automatically generate navigation links for each slide
$('.slide').each(function(index, value){
$('.marquee_nav').append('<a href="#" class="marquee_nav_item"></a>');
});
//2nd STEP
// Set the navigation links and initiate the slideshow
$('.marquee_nav .marquee_nav_item').on('click', function(){
$('.marquee_nav_item').removeClass('selected');
$(this).addClass('selected');
//3rd STEP
// Animate the slideshow
var navClick = $(this).index();
var holderWidth = $('.marquee_container').width();
var photoPosition = navClick * holderWidth;
$('.marquee_container .holder').animate({'margin-left' : -photoPosition}, 1000);
// Animate the caption
$('.marquee_caption').animate({'top':275}, 500);
});
});