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
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);
});
© Stack Overflow or respective owner