Доброго дня всем.
Есть вертикальный слайдер slick. Он крутит несколько картинок, которые образуют одну большую картинку (рич для товаров, как на вб). В каждом товаре разное кол-во картинок. Из-за этого возникает небольшая проблема - слайдер скроллит несуществующие картинки, хотя я их скриптом убрал.
$(function(){
$('.slick-slide img').on("error", function(){
$(this).hide().closest('.slick-slide').remove();
}); // если фото не существует, убираем целиком контейнер с ним
});
Для каждого товара создаётся своя папка, где может быть от 3 до 8 фото.
Сейчас я в скрипте указал максимальное кол-во фото - 8.
Дальше в диве циклом выводятся эти фото:
for(var i = 1; i < 8; i++){
document.write('<div><img src="/image/catalog/-rich/<?php echo $model; ?>/<?php echo $model; ?>-' + i + '.jpg" /></div>');
}
Как можно заменить цифру в счётчике
i < 8 на что-то универсальное, типа
i < n, и чтобы скрипт самостоятельно определял, сколько в папке фото?
Скриншот для понимания: красным выделил существующие фото, они подгрузились, всё ок.
жёлтым выделил блок с несуществующими фото, которые слайдер slick сам резервирует под них место, т.к. по счётчику i < 8 он и должен их выводить. Т.е. сами фото он не выводит, т.к их просто нет, но пустое пространство для них выделяет.