I am trying to create a unique slideshow effect with 6 graphics. The first two graphics should slide from left to right, the third graphic should fade in and stick, and then the remaining graphics should slide from left to right. I have been able to implement individual effects in my slideshow code, but I am struggling to combine sliding and fading animations. How can I achieve this blend of effects? Below is the current code snippet:
<div id='slider_container'>
<div id="slides">
<img src='images/Team-Up-wTag_CMYK_Over-White.jpg' />
<img src='images/Together-all-3-01.jpg' />
<img src='images/One-Team-One-Focus-RESIZED.jpg' />
<img src='images/Orlando_Seaworld_ExteriorSeaworldView.jpg' />
<img src='images/DSC_1465.JPG' />
<img src='images/DSC_1470.JPG' />
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
var slideContainer = $('#slider_container'), slidesHolder = $(slideContainer).children(), slideWidth = slideContainer.width(), slidePos = 0, slides = $(slidesHolder).children(), slideTotal = slides.length, currentSlide = 0, delay = 3000, slideTime = 800;
$(slideContainer).css({
'overflow': 'hidden',
'position': 'relative'
});
$(slidesHolder).css({
'position': 'absolute'
});
for (var i = 0; i < slides.length; i++) {
$(slides[i]).css({
'position': 'absolute',
'top': '0',
'left': slidePos + 'px'
});
slidePos = slidePos + slideWidth;
}
$(slidesHolder).css('width', slidePos + slideWidth);
$(slides).first().clone().css({
'left': slidePos + 'px'
}).appendTo(slidesHolder);
function animate() {
$(slidesHolder).delay(delay).animate({
left: '-=' + slideWidth
}, slideTime, function() {
if (currentSlide < slideTotal - 1) {
currentSlide++;
animate();
} else {
$(slidesHolder).css({
'left': 0
});
currentSlide = 0;
animate();
}
});
}
animate();
});
</script>