jQuery carousel duplicate

Question

Я работаю над шаблоном бутстрапа, в котором есть карусель jQuery. Я пытаюсь его умножить, но когда я копирую весь div и вставляю его, элементы управления применяются к исходному.

Как я могу это сделать?

Я не могу опубликовать jQuery js, потому что он слишком велик.

<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>

Answer 1

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

При копировании карусельный изменить идентификатор к чему-то другому, чем карусель-работы

Также управляет "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>