How to set a duration per slide in a jquery slideshow?

Question

I am making a slideshow. This slides are all div's with content inside of them. Right now i have a function which adds a class to the next item in a container. I call that function with: setInterval("slideSwitch()", 10000) It works but all the slides have the same duration. What i want is that for example one slides shows 10 seconds and the following shows 15 seconds. Is there any way to set a duration per slide? Or should i use a javascript/jquery plugin?

Answer 1

The best approach to accomplishing a sliding timer is to use a recursive function call that sets a timeout and calls the same action. I have created a fiddle, but I will post the code here for clarity. You can go in and play with the code to see how it works. Here's the link to the fiddle .

function slideshow(action, time, index, max) {
  setTimeout(function() {
    action.call(this, index, max);
    if (index === 0) {
      slideshow(action, slideshow.duration.min, index + 1, max);
    } else if (index < max) {
      slideshow(action, slideshow.duration.max, index + 1, max);
    } else {
      slideshow(action, slideshow.duration.max, 0, max);
    }
  }, time);
}
slideshow.duration = {
  min: 1000,
  max: 2000
};
slideshow.slideSpeed = 'fast';

$(function() {
  var slides = $('.slides .square');
  slideshow(function(idx, max) {
    switch (idx) {
      case 0:
        slides.eq(max).fadeOut(slideshow.slideSpeed, function() {
          slides.eq(idx).fadeIn(slideshow.slideSpeed);
        });
        break;
      case 1:
        slides.eq(idx - 1).fadeOut(slideshow.slideSpeed, function() {
          slides.eq(idx).fadeIn(slideshow.slideSpeed);
        });
        break;
      case 2:
        slides.eq(idx - 1).fadeOut(slideshow.slideSpeed, function() {
          slides.eq(idx).fadeIn(slideshow.slideSpeed);
        });
        break;
      case 3:
        slides.eq(idx - 1).fadeOut(slideshow.slideSpeed, function() {
          slides.eq(idx).fadeIn(slideshow.slideSpeed);
        });
        break;
    }
  }, slideshow.duration.min, 0, 3);
});

Let me know if you need further assistance with this.