I am really struggling with this piece of code and I just can't seem to figure out what's causing the issue. If anyone has any insight on how I can make it display a slide for 3 seconds, fade out, show a new slide, and then loop back to the first one, I would greatly appreciate it! I've included my current code below. This project is due in two weeks and I have a lot more work to do, so any help is welcome!
<section class="clearfix">
<div id="snapshots">
<article>
<img src="http://static.tumblr.com/dbek3sy/4mem1qr1m/themes_image.png">
</article>
<article>
<img src="http://static.tumblr.com/dbek3sy/q8Em247a0/slidehome_4.png">
</article>
<article>
<img src="http://static.tumblr.com/dbek3sy/dsLm2trr5/slidehome_5.png">
</article>
</div>
</section>
/* joey content slider function */
window.onload = function() {
var time = 1500;
var content = $('#snapshots');
var cont = 1;
// MARK THE ARTICLES AND CONTENT
$(function article(){
// how many slides
// an = article number
var an = content.find("article").length;
// define the amount of slides in a class name
// example: <div class= "slides_6">
content.addClass("slides_"+an);
// slide switcher
content.append('<div id="switch"></div>');
};
// FIND AND MARK SLIDES
$(function slides() {
numb = 1;
content.find("article").each(function(){
$(this).addClass("slide_"+numb);
numb++;
$(this).hide();
});
//setTimeout("", 4000);
}
function slider(content, time){
content.fadeOut(time, function() {
// plus 1 slide
var conta = cont+1;
$("article.slide_"+conta).animate({
"display": "block"
},1500);
$("article.slide_"+cont).animate({
"display": "none"
},1500);
setTimeout("doitdude()", 4000);
});
}
// RESET SLIDE
function reset(content, time) {
// fade out content
content.fadeOut(time, function(){
// while fading out
// show first slide
$("article.slide_1").animate({
"display": "block"
},1500);
// hide the last one
$("article.slide_"+conta).animate({
"display": "none"
},1500);
// end transition
});
setTimeout("doitdude()", 4000);
}
function doitdude() {
if(cont < an) {
slider(content, 1000);
cont++;
}
else{
var conta = cont;
var cont = 1;
// reset code here:
reset()
}
};
#snapshots { overflow :hidden ; height :410px ; width: auto ;}
#snapshots img{}
Note: I can't use a plugin because I am trying to make my own. Thanks!
Also a JsFiddle here: