Question

我有一个jQuery滑块，我试图在页面上重复近20次。如果我只有一个滑块，那就太棒了！但是，我需要帮助弄清楚它有什么问题，如果还有更多的初始滑块，它会让它破裂。如果我可以创建动态解决此问题，这将是最佳的，以便可以向页面添加无限数量的滑块。代码如下：

jQuery：

<script type="text/javascript">
  // Call plugin if you put in head if not not require DOMContentLoaded
  document.addEventListener('DOMContentLoaded',function(){
    new boxSlider(document.querySelector('#slide-one'),{
        delay: '1000', // ms
        effect: 'ease-in-out'
    });

    new boxSlider(document.querySelector('#slide-two'),{
        delay: '2000', // ms
        effect: 'ease'
    });

    new boxSlider(document.querySelector('#slide-three'),{
        delay: '500', // ms
        effect: 'linear'
    });
  });
</script>

HTML：

 <div id="row1mini">
    <section id="slide-one" class="slide">
      <article class="slide-inner">
        <figure>
          <img src="http://ep.yimg.com/ay/stylinonline/superman-vintage-logo-3-4-raglan-t-shirt-sheer-4.jpg" alt=""/>
          <figcaption>The Underground</figcaption>
        </figure>
        <figure>
          <img src="https://s7.jcrew.com/is/image/jcrew/78151_WW0699?$pdp_fs418$" alt=""/>
          <figcaption>The city</figcaption>
        </figure>
        <figure>
          <img src="http://www.royalrobbins.co.uk/images/coolmesh-baja-l-s-shirt-soapstone-p130-119_zoom.jpg" alt=""/>
          <figcaption>The map</figcaption>
        </figure>
        </article>
        <a href="#" class="btn right" >></a>
        <a href="#" class="btn left" ><</a>
    </section>
    <section id="slide-two" class="slide">
      <article class="slide-inner">
      <figure>
        <img src="http://www.patagonia.com/tsimages/55005_579.fpx?wid=1000&hei=1000&ftr=8&effect=dropshadow,0x000000,10,8,120,8&cvt=jpeg" alt=""/>
        <figcaption>The Underground</figcaption>
      </figure>
      <figure>
        <img src="http://www.peterglenn.com/sites/default/files/imagecache/product_1000x1000/product_images_new/70288_13_BRT_BLUE_LG.jpg" alt=""/>
        <figcaption>The city</figcaption>
      </figure>
      <figure>
        <img src="http://www.oldnavy.com/products/res/thumbimg/fleece-pants-for-baby-tangelo.jpg" alt=""/>
        <figcaption>The map</figcaption>
      </figure>
      </article>
      <a href="#" class="btn right" >></a>
      <a href="#" class="btn left" ><</a>
    </section>
    <section id="slide-three" class="slide">
      <article class="slide-inner">
      <figure>
        <img src="http://www.photo-dictionary.com/photofiles/list/2517/3301gym_shoes.jpg" alt=""/>
        <figcaption>The Underground</figcaption>
      </figure>
      <figure>
        <img src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Mens'_ballroom_shoes,_Eurodance_CZ.jpg" alt=""/>
        <figcaption>The city</figcaption>
      </figure>
      <figure>
        <img src="http://www.dunklowbox.com/images/dunks/Reebok-Hello-Kitty-Travel-PT-20-INT-White-Red-RBK-Brass.jpg" alt=""/>
        <figcaption>The map</figcaption>
      </figure>
      </article>
      <a href="#" class="btn right" >></a>
      <a href="#" class="btn left" ><</a>
    </section>
  </div>

这里我重复上面的HTML，让幻灯片崩溃

  <div id="row1mini">
 <section id="slide-one" class="slide">
      <article class="slide-inner">
        <figure>
          <img src="http://ep.yimg.com/ay/stylinonline/superman-vintage-logo-3-4-raglan-t-shirt-sheer-4.jpg" alt=""/>
          <figcaption>The Underground</figcaption>
        </figure>
        <figure>
          <img src="https://s7.jcrew.com/is/image/jcrew/78151_WW0699?$pdp_fs418$" alt=""/>
          <figcaption>The city</figcaption>
        </figure>
        <figure>
          <img src="http://www.royalrobbins.co.uk/images/coolmesh-baja-l-s-shirt-soapstone-p130-119_zoom.jpg" alt=""/>
          <figcaption>The map</figcaption>
        </figure>
        </article>
        <a href="#" class="btn right" >></a>
        <a href="#" class="btn left" ><</a>
    </section>
    <section id="slide-two" class="slide">
      <article class="slide-inner">
      <figure>
        <img src="http://www.patagonia.com/tsimages/55005_579.fpx?wid=1000&hei=1000&ftr=8&effect=dropshadow,0x000000,10,8,120,8&cvt=jpeg" alt=""/>
        <figcaption>The Underground</figcaption>
      </figure>
      <figure>
        <img src="http://www.peterglenn.com/sites/default/files/imagecache/product_1000x1000/product_images_new/70288_13_BRT_BLUE_LG.jpg" alt=""/>
        <figcaption>The city</figcaption>
      </figure>
      <figure>
        <img src="http://www.oldnavy.com/products/res/thumbimg/fleece-pants-for-baby-tangelo.jpg" alt=""/>
        <figcaption>The map</figcaption>
      </figure>
      </article>
      <a href="#" class="btn right" >></a>
      <a href="#" class="btn left" ><</a>
    </section>
    <section id="slide-three" class="slide">
      <article class="slide-inner">
      <figure>
        <img src="http://www.photo-dictionary.com/photofiles/list/2517/3301gym_shoes.jpg" alt=""/>
        <figcaption>The Underground</figcaption>
      </figure>
      <figure>
        <img src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Mens'_ballroom_shoes,_Eurodance_CZ.jpg" alt=""/>
        <figcaption>The city</figcaption>
      </figure>
      <figure>
        <img src="http://www.dunklowbox.com/images/dunks/Reebok-Hello-Kitty-Travel-PT-20-INT-White-Red-RBK-Brass.jpg" alt=""/>
        <figcaption>The map</figcaption>
      </figure>
      </article>
      <a href="#" class="btn right" >></a>
      <a href="#" class="btn left" ><</a>
    </section>
  </div>

Answer 1

您可以重复HTML但需要更改添加的滑块的ID ... ID需要是唯一的..您需要为每组唯一ID添加更多滑块实例

使用jQuery作为滑块，首先工作但第二个没有。需要动态元素

1 个答案: