Issue creating side-by-side slideshows with jQuery

Question

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/

Answer 1

First:- Never write id as numbers. try with $(window).load because document.ready always work once the basic html generated, however, window.load work when all the resources loaded into html like images etc... I've seen on js fiddle it's working fine. What I've done is closed all the <img> tags properly due to which html starts working. Removed document.ready from code and set onload in the left panel of jsfiddle

Selected jquery 1.8.3 in the left panel