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

Posted 2023-05-08

【中文标题】无法创建小滑块的多个实例

【英文标题】：Unable to create multiple instance of tiny slider

【发布时间】：2022-01-11 13:37:52

【问题描述】：

我一直在尝试添加多个小滑块实例。但它只适用于第一个 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"  />
          <img src="/assets/img/men-img (2).jpg"  />
          <img src="/assets/img/men-img (3).jpg"  />
          <img src="/assets/img/men-img (4).jpg"  />
          <img src="/assets/img/men-img (5).jpg"  />
          <img src="/assets/img/men-img (6).jpg"  />
          <img src="/assets/img/men-img (7).jpg"  />
          <img src="/assets/img/men-img (8).jpg"  />
        </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"  />
          <img src="/assets/img/men-img (2).jpg"  />
          <img src="/assets/img/men-img (3).jpg"  />
          <img src="/assets/img/men-img (4).jpg"  />
          <img src="/assets/img/men-img (5).jpg"  />
          <img src="/assets/img/men-img (6).jpg"  />
          <img src="/assets/img/men-img (7).jpg"  />
          <img src="/assets/img/men-img (8).jpg"  />
        </div>
      </div>
    </div>

【问题讨论】：

我认为问题可能是容器对于两个 container: '.my-slider'

是相同的

【参考方案1】：

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

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