title: How to place two bootstrap carousels in the same page?
body: <p><a href="https://i.stack.imgur.com/K7t9L.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K7t9L.jpg" alt="Here is a mockup image of what I am trying to do"></a>I am trying to use two bootstrap carousels on the same page. The following is the code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;!--BOOTSTRAP LINKS FOR CAROUSEL--&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;!--BOOTSTRAP LINKS--&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="style.css" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;!--START OF NAVBAR--&gt;
      &lt;div class="nav-box"&gt;
          &lt;br&gt;
          &lt;nav class="navbar navbar-default"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;img src="logo.png" id="logo"&gt;&lt;/img&gt;
                  &lt;/div&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;ABOUT S&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;!--END OF NAVBAR--&gt;
      &lt;!--START OF BOOTSTRAP CAROUSEL--&gt;
      &lt;section class="section-white"&gt;
          &lt;div class="container"&gt;
              &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
                  &lt;!-- Indicators --&gt;
                  &lt;ol class="carousel-indicators"&gt;
                      &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                      &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
                      &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
                  &lt;/ol&gt;
                  &lt;!-- Wrapper for slides --&gt;
                  &lt;div class="carousel-inner" style="width:100%; height: 500px !important;"&gt;
                      &lt;div class="item active"&gt;
                          &lt;img src="a.jpg" alt="..."&gt;
                          &lt;div class="carousel-caption"&gt;
                              &lt;h2&gt;Heading&lt;/h2&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;img src="b.jpg" alt="..."&gt;
                          &lt;div class="carousel-caption"&gt;
                              &lt;h2&gt;Heading&lt;/h2&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;img src="c.jpg" alt="..."&gt;
                          &lt;div class="carousel-caption"&gt;
                              &lt;h2&gt;Heading&lt;/h2&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- Controls --&gt;
                  &lt;a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"&gt;
                      &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a class="right carousel-control" href="#carousel-example-generic" data-slide="next"&gt;
                      &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;!--END OF BOOTSTRAP CAROUSEL--&gt;
      &lt;!--START OF RADIO BAR--&gt;
      &lt;div class="radio-bar"&gt;
          &lt;div class="text1"&gt;
              &lt;h3 id="text1-line1"&gt;streams&lt;/h3&gt;
              &lt;h4 id="text1-line2"&gt;shows&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="audio"&gt;
              &lt;audio controls&gt;
                  &lt;source src="viper.mp3" type="audio/mp3" controls="controls"&gt;
              &lt;/audio&gt;
          &lt;/div&gt;
          &lt;div id="podcast-box"&gt;
              &lt;img src="icon.png" id="image"&gt;&lt;/img&gt;
              &lt;p id="pheading"&gt;casts&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="blue-box"&gt;
              &lt;img src="blue.svg" id="blue-box-image"&gt;&lt;/img&gt;
              &lt;p id="blue-box-heading"&gt;show&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--END OF RADIO BAR--&gt;
      &lt;!--START OF ABOUT US BAR--&gt;
      &lt;div class="about-us"&gt;
          &lt;h3 id="heading"&gt;ABOUT&lt;/h3&gt;
          &lt;p id="para"&gt;*******&lt;/p&gt;
          &lt;div class="image-box"&gt;
              &lt;img src="image.jpg" id="image"&gt;&lt;/img&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--END OF ABOUT US BAR--&gt;
      &lt;!--START OF VIDEO CAROUSEL--&gt;
      &lt;div class="container" id="container"&gt;
          &lt;div class="row" id="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;div id="Carousel" class="carousel slide" id="carousel"&gt;
                      &lt;ol class="carousel-indicators" id="carousel-indicators"&gt;
                          &lt;li data-target="#Carousel" data-slide-to="0" class="active" id="action"&gt;&lt;/li&gt;
                          &lt;li data-target="#Carousel" data-slide-to="1"&gt;&lt;/li&gt;
                          &lt;li data-target="#Carousel" data-slide-to="2"&gt;&lt;/li&gt;
                      &lt;/ol&gt;
                      &lt;!-- Carousel items --&gt;
                      &lt;div class="carousel-inner" id="carousel-inner"&gt;
                          &lt;div class="item active" id="item-active"&gt;
                              &lt;div class="row" id="row"&gt;
                                  &lt;div class="col-md-3"&gt;
                                      &lt;a href="#" class="thumbnail"&gt;&lt;img src="" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-3"&gt;
                                      &lt;a href="#" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-3"&gt;
                                      &lt;a href="#" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-3"&gt;
                                      &lt;a href="#" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!--.row--&gt;
                          &lt;/div&gt;
                          &lt;!--.item--&gt;
                          &lt;div class="item" id="item"&gt;
                              &lt;div class="row" id="row"&gt;
                                  &lt;div class="col-md-3"&gt;
                                      &lt;a href="#" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-3"&gt;
                                      &lt;a href="#" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-3"&gt;
                                      &lt;a href="#" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-3"&gt;
                                      &lt;a href="#" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!--.row--&gt;
                          &lt;/div&gt;
                          &lt;!--.item--&gt;
                          &lt;div class="item" id="item"&gt;
                              &lt;div class="row" id="row"&gt;
                                  &lt;div class="col-md-3"&gt;
                                      &lt;a href="#" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-3"&gt;
                                      &lt;a href="#" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-3"&gt;
                                      &lt;a href="#" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div class="col-md-3"&gt;
                                      &lt;a href="#" class="thumbnail"&gt;&lt;img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;!--.row--&gt;
                          &lt;/div&gt;
                          &lt;!--.item--&gt;
                      &lt;/div&gt;
                      &lt;!--.carousel-inner--&gt;
                      &lt;a data-slide="prev" href="#Carousel" class="left carousel-control" id="carousel-control"&gt;‹&lt;/a&gt;
                      &lt;a data-slide="next" href="#Carousel" class="right carousel-control" id="carousel-control"&gt;›&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;!--.Carousel--&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--.container--&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $('#Carousel').carousel({
              interval: 5000
          })
      });
      &lt;/script&gt;
      &lt;!--END OF VIDEO CAROUSEL--&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I changed the class names to id, because it was overlapping with the previous carousel. Even after doing that the second carousel is overlapping with the element just before it, and the right navigation arrow is not appearing.  </p>
  
  <p>I checked the following link: <a href="https://stackoverflow.com/questions/10521257/is-it-possible-to-have-multiple-twitter-bootstrap-carousels-on-one-page/10521806#10521806">Is it possible to have multiple Twitter Bootstrap carousels on one page?</a>.</p>
  
  <p>Here it says that the navigation href should point to different ids, which I have done.  But I am still getting the problem. </p>
  
  <p>Where am I going wrong?</p>