Есть сайт где моя функция создает 200 слайдов для slick'a, так как это происходит в самом начале, загрузка сайта занимает много времени. придумал динамично их создавать, при достижении какого то слайда. Это сработало вроде как, обманув слик. Но в код html они вставились, а для слика их не существует и он не переходит к следующему динамическому слайду. В программирование я почти ноль чтобы такую штуку создать самому.
function renderNextCard1(i1, slider11){
//при моем условии функция запускается
id++;
photoNum1 += 1;
// оптимизация - выводим гифки на нечетных карточках
if (i1 % 2 != 0){
gifNum1 += 1;
}
// повторяем гифки с начала если закончились
if (gifNum1 > gifAll){
gifNum1 = 1;
}
// заменяем пропущенный текст
if(text[i1] == undefined){
text[i1] = replace;
}
//слайд для добавления в slider11 = $('#slider-1 .slick-list .slick-track');
nextcard11 = `
<div class="slick-slide" data-slick-index="${i1-1}" aria-hidden="true" style="width: 100vw;" tabindex="-1">
<div>
<div id="${id}" class="card flipper card-next">
<div class="gif-card"><img src="img/gif/${gifNum1}.gif" alt=""></div>
<div class="lock lock-close front"><img src="img/lock/lock-close.svg" alt=""></div>
<div class="card-img back"><img src="img/photo/${photoNum1}.jpg" alt=""></div>
<div class="card-transparent back back-1"></div>
<div class="text front"><div class="text_inner"><p>${text[i1]}</p></div></div>
</div>
</div>
</div>
`;
//добавляем карточку в слайдер 1
slider11.append(nextcard11);
// оптимизация - удаляем гифки на четных слайдах
if (i1 % 2 == 0){
$(`#${id} .gif-card img`).remove();
}
}