Question

I had made my jQuery slideshow so the text and images will cycle through the way they are supposed to, however, it won’t repeat. If I have it cycle through JUST the images or text it will repeat, but not together.

http://jsfiddle.net/ncafV/3/

HTML:

<div id="slideshow">
<div id="slideContain">
    <img src="http://www.codekrewe.com/images/surf.png" height="200px" width="300px" />
    <img src="http://www.codekrewe.com/images/leafriverresources.png"  height="200px"        width="300px" />
    <img src="http://www.codekrewe.com/images/bookReviews.png"  height="200px" width="300px" /> 
    <p class="slideInfo">Surf Shack Yogurt was a fun business to work with. They gave me a shot when I had barely anything to prove my worth, and for that, I thank them. This website help me expand my knowledge about web development/design...</p>
    <p class="slideInfo">I found Leaf River Resource's website to have a unique challenge when developing/designing it. The oil/gas business does not want to disclose all of their info/tricks on a website for all of their competitors to see...</p>
    <p class="slideInfo">This book database site was requested by an english teacher at Castle View High School for his students. This website gave me much needed practice and new knowledge that I can now apply to future projects...</p>
</div>
</div>​

CSS:

#slideContain{
position:relative;
width:900px;
height:250px;
margin-left:auto;
margin-right:auto;
}
#slideContain img{
position:absolute;
left:5px;
top:25px;
}
#slideContain p{
width:570px;
height:200px;
position:absolute;
left: 330px;
top:25px;
}
.slideInfo{
color:#333;
text-shadow:0px -1px 1px #CCC;
}​

JavaScript:

$(function() {
$('#slideContain img:gt(0)').hide();
$('#slideContain p:gt(0)').hide();
setInterval(function() {
    $('#slideContain img:first').fadeOut(1000)
    .next('img').fadeIn(1000)
    .end().appendTo('#slideContain');
}, 3000);
setInterval(function() {
    $('#slideContain .slideInfo:first').fadeOut(1000)
    .next('.slideInfo').fadeIn(1000)
    .end().appendTo('#slideContain');
}, 3000);
});

​

Answer 1

You can use this function instead:

$(function() {
        $('#slideContain img:gt(0)').hide();
        $('#slideContain p:gt(0)').hide();
        var index=0;
        var count=$("#slideContain img").length;    
    setInterval(function() {
            $('#slideContain img:eq('+index+')').fadeOut(1000);
            $('#slideContain p:eq('+index+')').fadeOut(1000);
            index++;
            if (index>=count) index=0;
            $('#slideContain img:eq('+index+')').fadeIn(1000);
            $('#slideContain p:eq('+index+')').fadeIn(1000);
    }, 2000);
});

It will work on any amount of slides, so you can add as much slides without changing the javascript.

Demo: http://jsfiddle.net/7Z7KC/