jQuery Slider - Как установить разное время для каждого изображения?

Question

Я пытаюсь заставить каждое изображение показывать различное количество времени и думал, что могу использовать плагин цикла, но, похоже, не могу заставить его работать, вот весь код

JQuery

  $(document).ready(function(){
     $('.slideshow ').cycle({ 
       fx:     'fade', 
       speed:  'fast',
       timeoutFn: function () { 
           return parseInt($(".slideshow img").attr('data-duration')) ;
       }   
     }); 
  });    

HTML

   <div class="slideshow">
    <img data-duration="5400" src="beach1.jpg" width="200" height="200" />
    <img data-duration="50" src="beach2.jpg" width="200" height="200" />
    <img data-duration="50" src="beach3.jpg" width="200" height="200" />
    <img data-duration="50" src="beach4.jpg" width="200" height="200" />
    <img data-duration="50" src="beach5.jpg" width="200" height="200" />
 </div>

что я делаю не так?

Спасибо за любую помощь:)
Лиам

Answer 1

Ваш вызов $(".slideshow img") соответствует всем пяти изображениям, а attr () всегда будет возвращать data-duration первого.

Вам нужно будет использовать аргументыпередается timeoutFn () вместо:

timeoutFn: function(curr, next, opts, fwd) {
    return parseInt($(opts.elements[opts.currSlide]).attr("data-duration"))
        * 1000;
}

Обратите внимание, что возвращаемое значение timeoutFn() выражается в миллисекундах, а не секундах.

Answer 2

Обратному вызову timeoutFn передается несколько аргументов: текущий слайд, следующий слайд, параметры и флаг пересылки.Вы можете обновить функцию timeoutFn для просмотра текущего слайда:

timeoutFn: function(curr, next, options, forward) {
    return parseInt($(curr).attr('data-duration'));
}

Ссылка: http://jquery.malsup.com/cycle/options.html

Answer 3

Ссылка на атрибуты текущего элемента слайда работает лучше:

     $('.slideshow ').cycle({ 
       fx:     'fade', 
       speed:  'fast',
       timeoutFn: function (currSlideElement, nextSlideElement, options, forwardFlag) { 
           return parseInt($(currSlideElement).attr('data-duration'));
       }   
     });