Issue creating side-by-side slideshows with jQuery

Posted by JShweky on Stack Overflow See other posts from Stack Overflow or by JShweky
Published on 2014-06-10T15:21:36Z Indexed on 2014/06/10 15:24 UTC
Read the original article Hit count: 129

Filed under:
|
|
|

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/

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery