Creating a slideshow with different lengths of time in between

Question

I have a fairly simple slideshow written in jQuery that fades between

elements.

In the code below it's set to fade between slides every 5 seconds. Is there a way I can modify this so I can set custom lengths of time to display each slide instead?

Here's a working example on jsfiddle.

My Code

$("#slideshow > div:gt(0)").hide();

    setInterval(function() { 
      $('#slideshow > div:first')
      .fadeOut(1000)
      .next()
      .fadeIn(1000)

      setTimeout(function() {$('#slideshow > div:first').appendTo("#slideshow")}, 1000)

    }, 5000);

user_14895985 · Answer

You can use an array delay[] to save all the times and create a function slide() with a setTimeout() method to slide through the different images.

Try the following snippet

$("#slideshow > div:gt(0)").hide();

let delay = [1000, 3000, 7000], i = 0;               

function slide() {         
  setTimeout(() => {   
    effect();
    if(i === delay.length){
      i = 0; 
      console.log('Next delay: ' + delay[i] + ' ms');
    }
    else{
      console.log('Next delay: ' + delay[i] + ' ms');
    }
    slide();
  }, delay[i])
  i++;
}

slide();

function effect(){   
    $('#slideshow > div:first')
      .fadeOut(1000)
      .next()
      .fadeIn(1000);

      setTimeout(() => {$('#slideshow > div:first').appendTo("#slideshow")}, 1000)
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#slideshow > div {
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
}

Creating a slideshow with different lengths of time in between

My Code

1 Answers

Try the following snippet