javascript - Glide.js 动态追加来自 Json 的内容

Question

我正在尝试从 JSON 动态地将内容添加到滑块。

import Glide from '@glidejs/glide';

function slider() {
  let ul = document.querySelector('.glide__slides');
  let card = '';
  var glide = new Glide('.glide').destroy();

  const photo = import('../metadata/photos.json').then((module) => {
    const data = module.default;
    data.forEach((photo) => {
      console.log(photo);
      card += `<li class="glide__slide"><img src="${photo.thumbnailUrl}" alt="${photo.title}">${photo.id}</li>`;
    });
    ul.innerHTML = card;
  });

  glide.mount();
}

slider();

内容似乎已加载，但滑块无法正常工作

Answer 1

发生这种情况是因为glide.mount();在导入和生成 HTML 完成之前运行。

因此，您必须导入数据并附加它then调用glide.mount();。

import Glide from '@glidejs/glide';

function slider() {
  let ul = document.querySelector('.glide__slides');
  let card = '';
  var glide = new Glide('.glide').destroy();

  const photo = import('../metadata/photos.json').then((module) => {
    const data = module.default;
    data.forEach((photo) => {
      console.log(photo);
      card += `<li class="glide__slide"><img src="${photo.thumbnailUrl}" alt="${photo.title}">${photo.id}</li>`;
    });
    ul.innerHTML = card;
  }).then(() => glide.mount());
}

slider();