1

Есть сайт где моя функция создает 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();
  }
}
2
  • Да вы прибедняетесь. Придумать алгоритм сложнее, чем поискать, как слик слайдер добавляет слайды динамически. По сути, вам одну строчку добавить и все заведется
    – Yugofx
    Commented 22 мая 2020 в 12:16
  • я пытался найти, но может надо в других местах искать. я пробовал найти что то в коде слика, какая функция за это отвечает, но моих знаний пока мало чтобы понять код. Вы не подскажете что за строчка нужна?
    – Troopyq
    Commented 22 мая 2020 в 14:53

1 ответ 1

0

Вы создаете nextcard11 путем добавления строки через parent.append(slide), поэтому не можете напрямую сослаться на добавленный слайд с помощью метода slickAdd.

Поэтому можно пойти немного другим путем, и создать сначала обертку слайда, запихнуть туда строку html и добавить это в DOM. Потом зарегистрировать эту обертку в slickInstance.

Получится что-то вроде:

// создаете слайд и сохраняете на него ссылку
const nextcard11 = document.createElement('div');
nextcard11.className = 'slick-slide';
nextcard11.setAttribute('data-slick-index', i1 - 1);
nextcard11.setAttribute('aria-hidden', 'true');
nextcard11.setAttribute('tabIndex', '-1');
nextcard11.style.width = '100vw';

// добавляете в него html-разметку
nextcard11.append(
      `<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>`
);
// добавляете его в разметку слайдера
slider11.append(nextcard11);

// регистрируете в slick, используйте свое имя slickInstance
slickInstance.slickAdd(nextcard11);

Хотя вот смотрю на API slick и мне кажется, что может сработать и метод в лоб:

slickInstance.slickAdd(`
     <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
  • Спасибо большое, вроде сработало, правда пришлось в nextcard11 исправить на innerHTML и slickAdd на slick("slickAdd", nextcard11). Из-за чего то появились другие баги, придется копаться что не так сделал
    – Troopyq
    Commented 22 мая 2020 в 17:16

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.