tiny slider无法创建多个实例，仅首个div滑块正常运行如何解决？

错误原因 #

• HTML中id属性全局唯一，你给两个滑块的控制容器都设置了相同的id="custom-control"，tiny slider检索控制容器时只会匹配页面第一个出现的对应id元素，导致第二个滑块控制绑定失效。
• 两个滑块的内容容器都使用了相同的类名.my-slider，tiny slider初始化时默认取第一个匹配类名的元素绑定，两个实例实际都绑定到了第一个滑块上，第二个滑块未完成正常初始化。

修改方案 #

1. 修改HTML结构

给两个滑块的内容容器、控制容器分别设置唯一标识：

<div class="men-section">
  <h2>Men</h2>
  <div class="tnsslider">
    <!-- 控制容器id修改为唯一值 -->
    <ul class="control" id="custom-control-men">
      <li class="prev">
        <i class="fas fa-angle-left fa-2x"></i>
      </li>
      <li class="next">
        <i class="fas fa-angle-right fa-2x"></i>
      </li>
    </ul>
    <!-- 滑块容器类修改为唯一值 -->
    <div class="my-slider-men">
      <img src="/assets/img/men-img.jpg" alt="" />
      <img src="/assets/img/men-img (2).jpg" alt="" />
      <img src="/assets/img/men-img (3).jpg" alt="" />
      <img src="/assets/img/men-img (4).jpg" alt="" />
      <img src="/assets/img/men-img (5).jpg" alt="" />
      <img src="/assets/img/men-img (6).jpg" alt="" />
      <img src="/assets/img/men-img (7).jpg" alt="" />
      <img src="/assets/img/men-img (8).jpg" alt="" />
    </div>
  </div>
</div>
<div class="women-section">
  <h2>Women</h2>
  <div class="tnsslider1">
    <!-- 控制容器id修改为唯一值 -->
    <ul class="control" id="custom-control-women">
      <li class="prev">
        <i class="fas fa-angle-left fa-2x"></i>
      </li>
      <li class="next">
        <i class="fas fa-angle-right fa-2x"></i>
      </li>
    </ul>
    <!-- 滑块容器类修改为唯一值 -->
    <div class="my-slider-women">
      <img src="/assets/img/men-img.jpg" alt="" />
      <img src="/assets/img/men-img (2).jpg" alt="" />
      <img src="/assets/img/men-img (3).jpg" alt="" />
      <img src="/assets/img/men-img (4).jpg" alt="" />
      <img src="/assets/img/men-img (5).jpg" alt="" />
      <img src="/assets/img/men-img (6).jpg" alt="" />
      <img src="/assets/img/men-img (7).jpg" alt="" />
      <img src="/assets/img/men-img (8).jpg" alt="" />
    </div>
  </div>
</div>

2. 修改初始化JS

两个实例分别对应各自的唯一容器即可，其余配置可保持不变：

let tnsslider = tns({
  container: '.my-slider-men',
  items: 3,
  gutter: 20,
  edgePadding: 20,
  controlsPosition: 'bottom',
  mouseDrag: true,
  autoplay: true,
  autoplayButtonOutput: false,
  controlsContainer: '#custom-control-men',
  nav: false,
  responsive: {
    0 : {
      items: 1
    },
    768 : {
      items: 2
    },
    1440 : {
      items: 3
    }
  }
});

let tnsslider1 = tns({
  container: '.my-slider-women',
  items: 3,
  gutter: 20,
  edgePadding: 20,
  controlsPosition: 'bottom',
  mouseDrag: true,
  autoplay: true,
  autoplayButtonOutput: false,
  controlsContainer: '#custom-control-women',
  nav: false,
  responsive: {
    0 : {
      items: 1
    },
    768 : {
      items: 2
    },
    1440 : {
      items: 3
    }
  }
});

如果后续需要新增大量同配置滑块，也可以封装通用初始化函数遍历生成，减少重复代码。

内容的提问来源于stack exchange，提问作者Ujjwal Kumar