Question

  <div class="col-md-5">
          <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
        <div class="item active">
          <img data-src="holder.js/500x500/auto/#777:#555/text:First slide" alt="First slide">
          </div>
          <div class="item">
            <img data-src="holder.js/500x500/auto/#666:#444/text:Second slide" alt="Second slide">
          </div>
          <div class="item">
            <img data-src="holder.js/500x500/auto/#555:#333/text:Third slide" alt="Third slide">
          </div>
        </div>
      </div>
        </div>

我的网站上有多个自举转盘，事情就是所有这些“工作”只是手动控制不是。只有这些数据目标小按钮才能在第一个滑块上工作，而不在另外两个图库上工作。提前致谢！

Answer 1

不要为多个轮播使用相同的ID。这是错误的HTML。

更改这些ides和相关链接。

<div data-ride="carousel" class="carousel slide" id="carousel-example-generic1"> 
 <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic1" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic1" data-slide-to="2"></li>
  </ol>
  ....
</div>

<div data-ride="carousel" class="carousel slide" id="carousel-example-generic2"> 
 <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic2" data-slide-to="2"></li>
  </ol>
  ....
</div>

多个轮播引导程序

1 个答案: