Question

我正在开发一个bootstrap模板，里面有jQuery轮播。我试图将它乘以它，但是当我复制整个div并粘贴它时，控件将应用于原始控件。

我该怎么做？

我无法发布jQuery js，因为它太大了。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="about"  class="about">
      <div class="row">
     
      <div class="col-sm-5 wowload fadeInLeft">
      <div class="spacer test2"><h4><i class="fa fa-code"></i>hi</h4><hr>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</p>
      </div>
      </div>

       <div class="col-sm-7 wowload fadeInRight">
        <div id="carousel-works" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
         <div class="item active"><img src="http://lorempixel.com/400/200/" class="img-responsive"></div>
         <div class="item"><img src="http://lorempixel.com/400/200/" class="img-responsive"></div>
         <div class="item"><img src="http://lorempixel.com/400/200/" class="img-responsive"></div>
        </div>    
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-works" role="button" data-slide="prev"><i class="fa fa-3x fa-angle-left"></i></a>
        <a class="right carousel-control" href="#carousel-works" role="button" data-slide="next"><i class="fa fa-3x fa-angle-right"></i></a>
        </div>
      </div>
      </div>  
    </div>

＆＃13;

Answer 1

<div id="carousel-works" class="carousel slide" data-ride="carousel">

当您复制轮播时，将ID更改为carousel-works

以外的其他内容

还控制“href”`到新ID

<a class="left carousel-control" href="#carousel-works" role="button" data-slide="prev"><i class="fa fa-3x fa-angle-left"></i></a>

<a class="right carousel-control" href="#carousel-works" role="button" data-slide="next"><i class="fa fa-3x fa-angle-right"></i></a>

这样的事情可能是

<div class="col-sm-7 wowload fadeInRight">
        <div id="carousel-works2" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
         <div class="item active"><img src="images/portfolio/4.jpg" class="img-responsive"></div>
         <div class="item"><img src="images/portfolio/5.jpg" class="img-responsive"></div>
         <div class="item"><img src="images/portfolio/6.jpg" class="img-responsive"></div>
        </div>    
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-works2" role="button" data-slide="prev"><i class="fa fa-3x fa-angle-left"></i></a>
        <a class="right carousel-control" href="#carousel-works2" role="button" data-slide="next"><i class="fa fa-3x fa-angle-right"></i></a>
        </div>
      </div>

jQuery轮播重复

1 个答案: