0

I created a slider with responsiveslides.js. It contains 5 different image slides.

I usually can assign a timeout of, for example, 4000 milliseconds, but it will be assigned to every single image of the slider.

I would like to assign different timeouts to each image slide. For example:

slide 1: timeout = 10000
slide 2: timeout = 2000
slide 3: timeout = 4000
slide 4: timeout = 4000
slide 5: timeout = 2000

How can I obtain that? Is it possible? Thank you very much for your help and sorry for my poor english.

I edited the code as suggested by Timctran but I did something wrong. Can you help me identifying what's wrong in this code?

I tried to change the code as you suggested. I don't have experience in javascript code so I did something wrong and the slider doesn't work anymore, so I reverted to old version. Here is how i modified the code:

 // Array to enter timeout values.
        var desiredTimeouts = [10000, 2000, 4000, 4000, 2000];
    // Auto cycle
    if (settings.auto) {
        startCycle = function (i) {
            rotate = setTimeout(function () {
          // Clear the event queue
          $slide.stop(true, true);

          var idx = index + 1 < length ? index + 1 : 0;

          // Remove active state and set new if pager is set
          if (settings.pager || settings.manualControls) {
            selectTab(idx);
          }

          slideTo(idx);
        startCycle(index);
    }, desiredTimeout[i]);
};

      // Init cycle
      startCycle(index);
    }

    // Restarting cycle
    restartCycle = function () {
      if (settings.auto) {
        // Stop
        clearTimeout(rotate);
        // Restart
        startCycle(index);
      }
    };

Any help in correcting the code will be really appreciated. Thanks!

BotWan
  • 3
  • 2
  • Was my answer of any help to you? It works when I tested it. – timctran Oct 04 '14 at 04:04
  • I tried to change the code as you suggested. I don't have experience in javascript code so I did something wrong and the slider doesn't work anymore, so I reverted to old version. I write the changed code in my first question. – BotWan Oct 04 '14 at 12:17
  • You defined desiredTimeouts (with an s), but later refer to the singular. So change desiredTimeout[i] to desiredTimeouts[i]. There's additional clearInterval that needs to be changed after the part that you mentioned above. I have added the necessary changes, hopefully a simple substitute will get things working for you. – timctran Oct 06 '14 at 18:58
  • Thank you very much! Now everything works correctly. I add the complete code below. – BotWan Oct 07 '14 at 09:39
  • Perhaps you can vote my answer as being the one that helped you. It was essentially the full code, only shortened for clarity. – timctran Oct 07 '14 at 21:46

2 Answers2

1

There's a function in the responsiveslides.js called rotate (line 232). In that part of the code, make any changes you see here:

// Array to enter timeout values.
var desiredTimeouts = [10000, 2000, 4000, 4000, 2000];
// Auto cycle
if (settings.auto) {
  startCycle = function (i) {
    rotate = setTimeout(function () {
      // Clear the event queue
      ...
      slideTo(idx);
      startCycle(index);
    }, desiredTimeout[i]);
  };
  // Init cycle
  startCycle(index);
}
...
     clearTimeout(rotate);
     startCycle(index);
...
     clearTimeout(rotate);

Summary of changes made to script:

  1. Add a line which contains desiredTimeouts.
  2. Changed setInterval to setTimeout.
  3. Add a call to startCycle at the end of the function.
  4. Changed two instances of clearInterval to clearTimeout
  5. Made index called as an argument to startCycle.
timctran
  • 505
  • 4
  • 10
  • I tried to change the code as you suggested. I don't have experience in javascript code so I did something wrong and the slider doesn't work anymore, so I reverted to old version. I write the changed code in my first question. – BotWan Oct 04 '14 at 10:37
  • 4 years later and this is exactly what I was looking for. You, Sir, are a leg-end! – Mark Aug 29 '18 at 15:53
0

Thanks to Timctran I have the final solution.

Open the responsiveslides.js file and go to line 227 (responsiveslides.js version 1.54).

Correct the existing code with the code below. Insert your desired timeouts, separeted by comma, in var desiredTimeout.

// Array to enter timeout values.
        var desiredTimeout = [10000, 4500, 4500, 4500];

    // Auto cycle
    if (settings.auto) {
        startCycle = function (i) {
            rotate = setTimeout(function () {
                // Clear the event queue
                $slide.stop(true, true);

                var idx = index + 1 < length ? index + 1 : 0;

                // Remove active state and set new if pager is set
                if (settings.pager || settings.manualControls) {
                    selectTab(idx);
                }

          slideTo(idx);
          startCycle(index);
          }, desiredTimeout[i]);
        };

      // Init cycle
      startCycle(index);
    }

    // Restarting cycle
    restartCycle = function () {
      if (settings.auto) {
        // Stop
        clearTimeout(rotate);
        // Restart
        startCycle(index);
      }
    };

    // Pause on hover
    if (settings.pause) {
      $this.hover(function () {
        clearTimeout(rotate);
      }, function () {
        restartCycle();
      });
    }
BotWan
  • 3
  • 2