responseiveslides.js - назначить конкретное время ожидания для каждого слайда

Question

Я создал слайдер с responseiveslides.js. Он содержит 5 различных слайдов изображений.

Я обычно могу назначить тайм-аут, например, 4000 миллисекунд, но он будет назначен каждому изображению слайдера.

Я хотел бы назначить разные таймауты для каждого слайда изображения. Например:

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

Как я могу получить это? Является ли это возможным? Большое спасибо за вашу помощь и извините за мой плохой английский.

Я отредактировал код в соответствии с предложением Timctran, но сделал что-то не так. Можете ли вы помочь мне определить, что не так в этом коде?

Я пытался изменить код, как вы предложили. У меня нет опыта в коде JavaScript, поэтому я сделал что-то не так, и ползунок больше не работает, поэтому я вернулся к старой версии. Вот как я изменил код:

 // 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);
      }
    };

Любая помощь в исправлении кода будет очень признательна. Спасибо!

Answer 1

Там есть функция в responsiveslides.js называется rotate (строка 232). В этой части кода внесите любые изменения, которые вы видите здесь:

// 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);

Сводка изменений, внесенных в скрипт:

1. Добавьте строку, которая содержит desiredTimeouts,
2. Изменено setInterval в setTimeout,
3. Добавить звонок в startCycle в конце функции.
4. Изменены два экземпляра clearInterval в clearTimeout
5. Сделал index называется в качестве аргумента startCycle,

Answer 2

Благодаря Timctran у меня есть окончательное решение.

Откройте файл respiveslides.js и перейдите к строке 227 (respiveslides.js версия 1.54).

Исправьте существующий код с кодом ниже. Введите желаемые тайм-ауты, разделенные запятой, в var requiredTimeout.

// 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();
      });
    }