Как заставить слайдер jQuery работать для сгенерированных идентификаторов?

Я создал автоматически сгенерированные идентификаторы, такие как

gallary-item-0, gallery-item-1, gallery-item-1

и так далее с PHP. Как настроить jQuery запустить слайдер для каждого идентификатора.
Вот код, который я написал, но он работает только для первого идентификатора.

var i = 0;
sleepTime = setInterval(function () {
var id = $(this).attr("id");
$('#gallery-item-'+i).ionImageSlider({
slideWidth: 150,
minSlides: 2,
maxSlides: 10,
moveSlides: 1,
slideMargin: 50,
pager: false
});
i++;
clearInterval(sleepTime);
}, 3000);
});

0

Решение

Не звони clearInterval(sleepTime) где вы его называете, потому что он будет срабатывать только один раз, как setTimeout,

Создайте переменную, которая имеет количество всех элементов с идентификатором, начинающимся с gallery-item, а затем позвоните clearInterval в вашем обработчике, когда счетчик достигнут.

var i = 0,
total = $('[id^="gallery-item-"]').length,
sleepTime = setInterval(function () {
$('#gallery-item-'+ i).ionImageSlider({
slideWidth: 150,
minSlides: 2,
maxSlides: 10,
moveSlides: 1,
slideMargin: 50,
pager: false
});
i++;
if (i == total - 1) {
clearInterval(sleepTime);
}
}, 3000);
0

Другие решения

Непонятно, для чего вы собираетесь использовать таймер — показывать все через 3 секунды или показывать каждый через 3 секунды.

Без таймера:

for (var i=0;i<2;++i) {
$('#gallery-item-'+i).ionImageSlider({
slideWidth: 150,
minSlides: 2,
maxSlides: 10,
moveSlides: 1,
slideMargin: 50,
pager: false
});
}

С одним таймером:

setTimeout(function() {
... same code as above ...
}, 3000);

С таймерами:

for (var i=0;i<2;++i) {
var loopI = i;
setTimeout(function() {
$('#gallery-item-'+loopI).ionImageSlider({
slideWidth: 150,
minSlides: 2,
maxSlides: 10,
moveSlides: 1,
slideMargin: 50,
pager: false
});
}, 3000 + (i+1));
}

Вы можете получить максимум предметов ( 2 в коде выше) из вашего php или с помощью селектора, как в комментариях.

0