0

Здравствуйте, суть такова:
Нужно модифицировать скрипт слайдера, чтобы задержка нулевого слайда и задержка остальных слайдов были разными опциями. Например выставить задержку первого слайда в 5 секунд, а всех остальных 15 секунд.

Ссылка на скрипт / Страница скрипта

Пожалуйста, поясните как справится с данной задачей. Заранее огромное спасибо.

2 ответа 2

3

Практически ничего в плагине не исправлял, хотя одолевает пичалька в некоторых моментах. Добавил только костыль (по другому не назовешь), для вашей задачи. Для начала - вот рабочий пример. Теперь поясню.

  • строка 18 (в примере) - добавляем: diffDelay : false;
  • строка 174, 177, 179 - изменяем setInterval и clearIterval на setTimeout и clearTimeout соответственно и изменяем options.delay на options.diffDelay ? options.diffDelay[cIndex] : options.delay;
  • строка 171 - после slideMove(cIndex, 'next'); добавляем, как в примере: timeOut = setTimeout(autoPlay, (options.diffDelay ? options.diffDelay[cIndex] : options.delay));

В опциях подключения плагина, прописываем параметр diffDelay с массивом значений задержек для кажгодо слайда отдельно. Кол-во значение должно быть равным кол-ву слайдов!!! В примере, установил для первого слайда задержку 3000, для второго 1000 и для третьего - 8000. И обратите внимание, что если вы задаете параметр diffDelay, то delay будет просто игнорироваться.


UPD P.S. Хотя я так подумал, что не обязательно делать количество значений равным количеству слайдов. Изменяем везде (три кусочка кода):

options.diffDelay ? options.diffDelay[cIndex] : options.delay
// на следующее
options.diffDelay[cIndex] ? options.diffDelay[cIndex] : options.delay

Теперь, если надо задать задержку только для первого слайда пишем так:

$(your_elem_selector).smSlider({
    autoPlay   : true,
    duration       : 500,
    diffDelay : [1000]
});
// Только для второго слайда
$(your_elem_selector).smSlider({
    autoPlay   : true,
    duration       : 500,
    diffDelay : [null, 1000]
});
// Для второго и четвертого слайда
$(your_elem_selector).smSlider({
    autoPlay   : true,
    duration       : 500,
    diffDelay : [null, 1000, null, 4000]
});
// И так далее...
0

Можно немного проще — не лезть в код самого smSlider(). У него есть опции-функции с помощью которых можно управлять настройками слайдера. Если взять .animationComplete, это функция, которая знает параметр toIndex — номер слайда. Можно завязываться на этот параметр.

Все настройки слайдера доступны в этой функции через this, только в случае изменения опции delay, надо сбрасывать внутренний timeOut слайдера. Его можно сбросить наведением курсора на слайдер.

То есть, пишем мини-функцию timerClear()

var $smSlider = $('#sm_slider');

var timerClear = function(){
    $smSlider.mouseover(); // навели курсор
    $smSlider.mouseout();    // убрали курсор
};

И используем ее в слайдере, как-нибудь так:

$smSlider.smSlider({
    autoPlay   : true,
    delay      : 15000,
    animationComplete : function(toIndex) {
         switch(toIndex) {
           case 0: 
              timerClear();
              this.delay = 1000; // время задержки перед вторым слайдом одна секунда
              break
           case 1:
              timerClear();
              this.delay = 2000; // время задержки две секунды
              break
           default:
              timerClear();
              // для всех остальных слайдов ставим 15 секунд
              this.delay = 15000;
            }
        }
    });

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.