无法创建小滑块的多个实例

Question

我一直在尝试添加多个小滑块实例。但它只适用于第一个 div。 我想在两个不同的 div 中添加两个具有相同属性的滑块。第一个滑块工作正常，但第二个滑块坏了

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

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

这是我一直在使用的 HTML 结构，我为两个滑块创建了两个不同的 div，但只有第一个按预期工作。

<div class="men-section">
      <h2>Men</h2>
      <div class="tnsslider">
        <ul class="control" id="custom-control">
          <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">
          <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">
        <ul class="control" id="custom-control">
          <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">
          <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>

Answer 1

您可以尝试更改您的第二个 div 类名称，并将其放入您的 tnsslider1.container

编辑：尝试更改您的 id 和 controlsContainer