Javascript Glide.js从Json动态追加内容

我试图从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();

从“@glidejs/Glide”导入Glide；
函数滑块（）{
设ul=document.querySelector（'.glide_u_幻灯片'）；
让卡片=“”；
var glide=新的glide（'.glide'）.destroy（）；
const photo=import（'../metadata/photos.json'）。然后（（模块）=>{
const data=module.default；
data.forEach（（照片）=>{
控制台日志（照片）；
卡片+=`
${photo.id}
`；
});
ul.innerHTML=卡片；
});
滑翔；滑翔；
}
滑块（）；

---

内容似乎已加载，但滑块不工作，这是因为

glide.mount（）在导入和生成HTML完成之前运行

因此，您必须导入数据并附加它
，然后调用
glide.mount（）

从“@glidejs/Glide”导入Glide；
函数滑块（）{
设ul=document.querySelector（'.glide_u_幻灯片'）；
让卡片=“”；
var glide=新的glide（'.glide'）.destroy（）；
const photo=import（'../metadata/photos.json'）。然后（（模块）=>{
const data=module.default；
data.forEach（（照片）=>{
控制台日志（照片）；
卡片+=`
${photo.id}
`；
});
ul.innerHTML=卡片；
}).然后（（）=>glide.mount（））；
}
滑块（）；
发生这种情况是因为
glide.mount（）在导入和生成HTML完成之前运行

因此，您必须导入数据并附加它
，然后调用
glide.mount（）

从“@glidejs/Glide”导入Glide；
函数滑块（）{
设ul=document.querySelector（'.glide_u_幻灯片'）；
让卡片=“”；
var glide=新的glide（'.glide'）.destroy（）；
const photo=import（'../metadata/photos.json'）。然后（（模块）=>{
const data=module.default；
data.forEach（（照片）=>{
控制台日志（照片）；
卡片+=`
${photo.id}
`；
});
ul.innerHTML=卡片；
}).然后（（）=>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();