2013-11-22 4 views
0

Как заставить мою карусель прокручивать разные предметы в разное время? Я пробовал играть с этим событием безрезультатно.Могу ли я установить различную продолжительность прокрутки для каждого элемента в caroufredsel?

$('#carousel').triggerHandler('configuration') 

e.g. Покажите слайд 1 на 5 секунд, слайд 2 на 10 секунд и так далее.

jQuery(".desktop-carouselContainer").carouFredSel({ 
     scroll: { 
      fx: "crossfade", 
      onAfter: function (data) { 
       data.scroll.duration = jQuery("#promo-timer", this).html() * 1000; 
      } 
     }, 
     auto: { 
      progress: { 
       bar: ".timer", 
       updater: function (percentage) { 
        jQuery(this).width(percentage/(jQuery("#promos-container .desktop-carouselContainer li a img").width()/(jQuery(".pagination").width() + 15)) + "%"); 
        jQuery(this).css({ "left": jQuery("#promos-container .desktop-carouselContainer li a img").width() - jQuery(".pagination").width() - 15 }); 
       }, 
       interval: 30 
      } 
     }, 
     pagination: { 
      container: ".pagination", 
      anchorBuilder: function (nr) { 
       var src = jQuery(".promo-title", this).html(); 
       return '<div class="pagination-link">' + src + '</div>'; 
      } 
     }, 
     width: 945, 
     height: 429 
    }) 

Edit: (Solution)

После игры с ним на некоторое время, вот как я получил это работает:

... 
    auto: { 
      onAfter: function (data) { 
       jQuery('.desktop-arouselContainer').triggerHandler('configuration').auto.timeoutDuration = jQuery("#promo-timer", this).html() * 1000; 
      } 
     } 
    ... 
+0

Похоже, что вы используете содержимое одного и того же ID для каждого слайда. Видя, что идентификатор должен быть уникальным, как вы надеялись, что это сработает? – isherwood

+0

# контроль промо-таймера находится внутри регулятора ретранслятора. Поэтому по какой-то причине jQuery («# promo-timer», this) .html() возвращает правильное значение для каждого слайда. –

ответ

0

Вот как я получил это работает:

... 
    auto: { 
      onAfter: function (data) { 
       jQuery('.desktop-arouselContainer').triggerHandler('configuration').auto.timeoutDuration = jQuery("#promo-timer", this).html() * 1000; 
      } 
     } 
    ... 
+0

whats your email id У меня есть новый вопрос, но у вас также большой код нужна ваша помощь? –

0

Вы, вероятно, придется использовать обратный вызов события для изменения параметров после каждого цикла. Что-то вроде:

// WARNING: HASTILY-WRITTEN AND UNTESTED PSEUDO-CODE! 
// 
$("#carousel").carouFredSel({ 
    ... , 
    scroll: { 
     onAfter: function(data) { 
      // set duration depending on slide index 
      case (... slide index = 1 ...) { 
       myDuration = 2000; 
      } 

      this.duration = myDuration; 
     } 
    }, 
    ...    
}); 
+0

В теории это должно было сработать, но это не так. :(Есть ли что-нибудь, что я не делаю правильно? –

+0

Я обновил вопрос с помощью своего кода. –

0

Если кто-то ищет способ, чтобы сделать несколько ползунков на одной странице использовать различные timeoutDuration:

макс, мин - ваш максимальный и минимальный временные интервалы

... 
    auto: { 
      onAfter: function (data) { 
         $(this).triggerHandler('configuration').auto.timeoutDuration = Math.floor(Math.random()*(max-min+1)+min); 
        } 
     } 
    ...