Issue creating side-by-side slideshows with jQuery
- by JShweky
I'm trying to create a site with 2 slideshows. I've tweaked and re-tweaked the JS and Jquery numerous times. Sometimes one slideshow works perfectly and the other cycles between one picture, other times both work but are out of sync, or the fadeIn doesn't seem to be applied to the second slideshow, or in some variations one slideshow stays frozen on the initial image and just remains static. Anyway, I created a JS Fiddle (link at bottom) and apparently my code is at least free of typos. JS is below, the rest is on the JS Fiddle. Any help would be greatly appreciated.
$(document).ready(function () {
$(".slider #1").fadeIn(1000);
$(".slider #1").delay(2000).fadeOut(1000);
var sc = $(".slider img").size();
var count = 2;
setInterval(function () {
$(".slider #" + count).fadeIn(1000);
$(".slider #" + count).delay(2000).fadeOut(1000);
if (count === sc) {
count = 1;
} else {
count++;
}
}, 3500);
$(".sliderTwo #7").fadeIn(1000);
$(".sliderTwo #7").delay(2000).fadeOut(1000);
var sc2 = 12;
var count2 = 7;
setInterval(function () {
$(".sliderTwo #" + count2).fadeIn(1000);
$(".sliderTwo #" + count2).delay(2000).fadeOut(1000);
if (count2 === sc2) {
count2 = 7;
} else {
count2++;
}
}, 3500);
});
http://jsfiddle.net/gg4PL/
