使用对象数组动态渲染时Tiny Slider JS轮播效果失效

动态生成Tiny Slider幻灯片节点后，内容已成功插入HTML，但轮播组件UI未正常渲染，所有幻灯片平铺展示，无轮播交互能力。
实际运行效果：

问题出在两个地方：

• 执行顺序错误：在动态生成所有幻灯片DOM之前就调用tns()初始化轮播。Tiny Slider初始化时只会识别容器内当前已存在的节点，后续插入的DOM不会被自动纳入轮播逻辑，还会破坏组件初始生成的布局结构，直接导致内容平铺。
• DOM层级不符合组件要求：Tiny Slider默认将container配置指向元素的直接子元素识别为单张幻灯片。原有HTML结构里，.my-slider下只有一层包裹div，所有克隆生成的.slide都塞在这个div内部，初始化时组件只会识别到1张幻灯片，根本不会生成轮播的交互和布局。

1. 调整DOM结构 #

去掉.my-slider和.slide之间多余的嵌套div，让初始的幻灯片模板直接作为.my-slider的子元素，修正后结构如下：

<div class="my-slider">
  <div class="slide">
    <div class="slide-img" style="background-image: url('src/images/img-1.jpg')">
      <a href="#">View More</a>
    </div>
    <br>
    <div class="slide-info">
      <h3 class="project-name"></h3>
      <p class="project-description subtext"></p>
    </div>
  </div>
</div>

2. 调整JS执行顺序 #

先完成所有幻灯片的动态渲染，移除初始模板节点后，再调用tns()初始化轮播，修正后代码如下：

const project = [
  {
    image: "src/images/img-1.jpg",
    name: "Project 1",
    description: "Project Description here.",
  },
  {
    image: "src/images/img-2.jpg",
    name: "Project 2",
    description: "Project Description here. 2",
  },
  {
    image: "src/images/img-3.jpg",
    name: "Project 3",
    description: "Project Description here. 3",
  },
  {
    image: "src/images/img-4.jpg",
    name: "Project 4",
    description: "Project Description here. 4",
  },
];

// 获取轮播容器和幻灯片模板
const sliderContainer = document.querySelector(".my-slider");
const slideTemplate = document.querySelector(".slide");

// 遍历数据生成所有幻灯片
project.forEach((proj) => {
  const newSlide = slideTemplate.cloneNode(true);
  newSlide.querySelector(".slide-img").style.backgroundImage = `url(${proj.image})`;
  newSlide.querySelector(".project-name").textContent = proj.name;
  newSlide.querySelector(".project-description").textContent = proj.description;
  // 新幻灯片直接追加到轮播容器下，保证是容器的直接子元素
  sliderContainer.appendChild(newSlide);
});

// 移除初始模板节点
sliderContainer.removeChild(slideTemplate);

// 所有DOM渲染完成后再初始化轮播
const slider = tns({
  container: ".my-slider",
  // 在此处补充你的自定义轮播配置，例如单页显示数量、导航按钮、自动播放等
  items: 1,
  controls: true,
  nav: true
});

如果修改后仍有问题，按以下顺序检查：

• 确认Tiny Slider对应的CSS文件已正确引入，CSS加载失败会直接导致布局错乱、幻灯片平铺
• 确认所有JS逻辑在DOM加载完成后执行，可将脚本放在body标签末尾，或包裹在DOMContentLoaded事件回调中执行
• 轮播初始化完成后，不要直接操作容器内的直接子节点，如果需要动态更新幻灯片内容，使用Tiny Slider官方提供的API操作

内容的提问来源于stack exchange，提问作者John Paulo A. Geronimo