CODEWITHSUNDEEP
javascriptjqueryslider
Muhammet Can TONBUL
Muhammet Can TONBUL

Reputation: 3538

Dynamically create multiple slide shows using setTimeout

I want to create a slide show of the number of objects in the "SliderArray" array when I click on the button.

The current JSfiddle is available in standalone mode.

When I take the function into the loop, things get messy

var myFunction = function() {
if (counter == 0) {
  $('#' + sliderarray[0].slaytarray[counter].id).fadeIn();
  frametime = sliderarray[0].slaytarray[counter].frame_time * 1000;
  counter++;
} else if (counter == sliderarray[0].slaytarray.length) {
  $('#' + sliderarray[0].slaytarray[counter - 1].id).fadeOut();
  counter = 0;
  frametime = 0;
} else {
  $('#' + sliderarray[0].slaytarray[counter - 1].id).fadeOut();
  $('#' + sliderarray[0].slaytarray[counter].id).fadeIn();
  frametime = sliderarray[0].slaytarray[counter].frame_time * 1000;
  counter++;
}

timeout = setTimeout(myFunction, frametime);

}

var timeout = setTimeout(myFunction, frametime);

And here my objects enter image description here

Upvotes: 1

Views: 53

Answers (1)

Erazihel
Erazihel

Reputation: 7605

This is "messy" because you never manipulate the second slider.

I fixed it by using a .forEach on the sliderarray:

var myFunction = function() {
    if (counter == 0) {
        sliderarray.forEach(function (slider) {
            $('#' + slider.slaytarray[counter].id).fadeIn();
            frametime = slider.slaytarray[counter].frame_time * 1000;
        });
        counter++;
    } else if (counter == sliderarray[0].slaytarray.length) {
        sliderarray.forEach(function (slider) {
            $('#' + slider.slaytarray[counter - 1].id).fadeOut();
        });
        counter = 0;
        frametime = 0;
    } else {
        sliderarray.forEach(function (slider) {
            $('#' + slider.slaytarray[counter - 1].id).fadeOut();
            $('#' + slider.slaytarray[counter].id).fadeIn();
            frametime = slider.slaytarray[counter].frame_time * 1000;
    });
    counter++;
}

There is still a problem for the frametime because you're only using once when two are needed. I'll just let you look into it.

See updated JSFiddle

Upvotes: 2

Related Questions