如何使用Tiny Slider JS动态遍历数据渲染轮播幻灯片

你的代码存在两个核心错误，导致所有内容被堆到同一张幻灯片：

• HTML中只预置了1组幻灯片结构，.my-slider容器下只有1个一级子元素，Tiny Slider默认会将容器的直接子元素识别为独立幻灯片，因此插件只会生成1张幻灯片。
• JS逻辑直接将map()返回的全量名称、描述数组插入到同一个固定id的元素中，相当于把所有项目的文本全部堆到同一个h3、p标签内，没有为每个项目生成独立的幻灯片DOM。

实际错误运行效果：

1. 简化HTML结构 #

删除写死的单张幻灯片静态代码，只保留轮播根容器即可，所有幻灯片内容通过JS动态生成：

<div id="sliderCont" class="my-slider">
  <!-- 动态生成的幻灯片将插入到这里 -->
</div>

2. 重写JS渲染逻辑 #

先遍历项目数组为每个项目生成独立的幻灯片DOM，全部插入容器后再初始化Tiny Slider（插件必须等DOM渲染完成后初始化才能识别所有幻灯片）：

const projects = [
  {
    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");

// 为每个项目生成独立幻灯片
projects.forEach((proj) => {
  const slideItem = document.createElement("div");
  slideItem.innerHTML = `
    <div class="slide">
      <div class="slide-img" style="background-image: url('${proj.image}')">
        <a href="#">View More</a>
      </div>
      <br>
      <div class="slide-info">
        <h3 class="project-name">${proj.name}</h3>
        <p class="project-description subtext">${proj.description}</p>
      </div>
    </div>
  `;
  sliderContainer.appendChild(slideItem);
});

// DOM渲染完成后初始化轮播
let slider = tns({
  container: ".my-slider",
  slideBy: 1,
  speed: 200,
  nav: false,
  controlsContainer: "#controls",
  prevButton: ".previous",
  nextButton: ".next",
  preventScrollOnTouch: "auto",
  autoplay: true,
  autoplayButtonOutput: false,
  responsive: {
    1600: {
      items: 4,
      gutter: 20,
    },
    1024: {
      items: 3,
      gutter: 20,
    },
    768: {
      items: 2,
      gutter: 20,
    },
    480: {
      items: 1,
    },
  },
});

• 动态生成重复元素时不要使用id做选择器，id在页面中必须唯一，重复id会导致DOM选择异常，统一使用class即可。
• Tiny Slider的识别规则是：配置项container指向的元素下，所有直接子元素会被当作独立幻灯片，生成DOM时不要把幻灯片嵌套多层放在容器下，否则插件无法识别。
• 所有依赖DOM结构的前端插件，必须等待动态生成的DOM全部插入页面后再执行初始化，否则插件无法读取到动态新增的节点。

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