title: Implementing 2 bootstrap carousels on one page?
body: <p>Despite giving both carousels unique IDs, the second carousel on my page isn't functioning correctly for some reason. </p>
  
  <p>For example, the second carousel's left and right arrows will do this odd thing where it just repositions itself. Also I have small grey area above the second carousel (I'm assuming some kind of height issue in the css).  </p>
  
  <p>I wanted to use this second carousel as a "photos gallery" carousel. Can anyone help?</p>
  
  <p><a href="https://jsfiddle.net/mrdat/nv7rsgpg/3/" rel="nofollow">https://jsfiddle.net/mrdat/nv7rsgpg/3/</a></p>
  
  <pre><code>  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;title&gt;Stylish Portfolio - Start Bootstrap Theme&lt;/title&gt;
  
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  
  
      &lt;!-- Custom CSS --&gt;
      &lt;link href="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/css/stylish-portfolio.css" rel="stylesheet"&gt;
  
      &lt;!-- Custom Fonts --&gt;
      &lt;link href="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"&gt;
      &lt;link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"&gt;
  
      &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
          &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  &lt;style&gt;
  
  .carousel-inner &gt; .item &gt; img,
  .carousel-inner &gt; .item &gt; a &gt; img {
      width: 100%;
      margin: auto;
      height: 100vh;
    }
  
  .vcenter {
      position: absolute;
      height:100px;
      width:100%;
      top:50%;
      bottom:50%;
      margin-top: -50px; 
      margin-bottom: -50px;
  }
  .v-center {
      position: absolute;
      height:100px;
      width:40%;
      top:50%;
      bottom:50%;
      margin-top: -50px; 
      margin-bottom: -50px;
      left:15%;
  }    
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;!-- Navigation --&gt;
      &lt;a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;nav id="sidebar-wrapper"&gt;
          &lt;ul class="sidebar-nav"&gt;
              &lt;a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;li class="sidebar-brand"&gt;
                  &lt;a href="#top"  onclick = $("#menu-close").click(); &gt;Start Bootstrap&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#top" onclick = $("#menu-close").click(); &gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#about" onclick = $("#menu-close").click(); &gt;About&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#services" onclick = $("#menu-close").click(); &gt;Services&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#portfolio" onclick = $("#menu-close").click(); &gt;Portfolio&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#contact" onclick = $("#menu-close").click(); &gt;Contact&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  
      &lt;header&gt;
          &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
              &lt;!-- Indicators --&gt;
              &lt;ol class="carousel-indicators"&gt;
                  &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                  &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
                  &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
                  &lt;li data-target="#myCarousel" data-slide-to="3"&gt;&lt;/li&gt;
              &lt;/ol&gt;
              &lt;!-- Wrapper for slides --&gt;
              &lt;div class="carousel-inner" role="listbox"&gt;
                  &lt;div class="item active"&gt;
                      &lt;img src="http://lorempixel.com/460/345/cats" /&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="http://lorempixel.com/460/345/business" /&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="http://lorempixel.com/460/345/abstract" /&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="http://lorempixel.com/460/345/transportation" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Left and right controls --&gt;
              &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
                  &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
              &lt;/a&gt;
              &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
                  &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Next&lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
  
      &lt;!-- About --&gt;
      &lt;section id="about" class="about"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-12 text-center"&gt;
                      &lt;div id="myCarousel2" class="carousel slide" data-ride="carousel"&gt;
              &lt;!-- Indicators --&gt;
              &lt;ol class="carousel-indicators"&gt;
                  &lt;li data-target="#myCarousel2" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                  &lt;li data-target="#myCarousel2" data-slide-to="1"&gt;&lt;/li&gt;
                  &lt;li data-target="#myCarousel2" data-slide-to="2"&gt;&lt;/li&gt;
  
              &lt;/ol&gt;
              &lt;!-- Wrapper for slides --&gt;
              &lt;div class="carousel-inner" role="listbox"&gt;
                  &lt;div class="item active"&gt;
                      &lt;img src="http://lorempixel.com/460/345/business" /&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="http://lorempixel.com/460/345/business" /&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;img src="http://lorempixel.com/460/345/business" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- Left and right controls --&gt;
              &lt;a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev"&gt;
                  &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
              &lt;/a&gt;
              &lt;a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next"&gt;
                  &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Next&lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- /.row --&gt;
          &lt;/div&gt;
          &lt;!-- /.container --&gt;
      &lt;/section&gt;
  
      &lt;!-- Services --&gt;
      &lt;!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ --&gt;
      &lt;section id="services" class="services bg-primary"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row text-center"&gt;
                  &lt;div class="col-lg-10 col-lg-offset-1"&gt;
                      &lt;h2&gt;Our Services&lt;/h2&gt;
                      &lt;hr class="small"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-3 col-sm-6"&gt;
                              &lt;div class="service-item"&gt;
                                  &lt;span class="fa-stack fa-4x"&gt;
                                  &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
                                  &lt;i class="fa fa-cloud fa-stack-1x text-primary"&gt;&lt;/i&gt;
                              &lt;/span&gt;
                                  &lt;h4&gt;
                                      &lt;strong&gt;Service Name&lt;/strong&gt;
                                  &lt;/h4&gt;
                                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
                                  &lt;a href="#" class="btn btn-light"&gt;Learn More&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3 col-sm-6"&gt;
                              &lt;div class="service-item"&gt;
                                  &lt;span class="fa-stack fa-4x"&gt;
                                  &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
                                  &lt;i class="fa fa-compass fa-stack-1x text-primary"&gt;&lt;/i&gt;
                              &lt;/span&gt;
                                  &lt;h4&gt;
                                      &lt;strong&gt;Service Name&lt;/strong&gt;
                                  &lt;/h4&gt;
                                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
                                  &lt;a href="#" class="btn btn-light"&gt;Learn More&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3 col-sm-6"&gt;
                              &lt;div class="service-item"&gt;
                                  &lt;span class="fa-stack fa-4x"&gt;
                                  &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
                                  &lt;i class="fa fa-flask fa-stack-1x text-primary"&gt;&lt;/i&gt;
                              &lt;/span&gt;
                                  &lt;h4&gt;
                                      &lt;strong&gt;Service Name&lt;/strong&gt;
                                  &lt;/h4&gt;
                                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
                                  &lt;a href="#" class="btn btn-light"&gt;Learn More&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-3 col-sm-6"&gt;
                              &lt;div class="service-item"&gt;
                                  &lt;span class="fa-stack fa-4x"&gt;
                                  &lt;i class="fa fa-circle fa-stack-2x"&gt;&lt;/i&gt;
                                  &lt;i class="fa fa-shield fa-stack-1x text-primary"&gt;&lt;/i&gt;
                              &lt;/span&gt;
                                  &lt;h4&gt;
                                      &lt;strong&gt;Service Name&lt;/strong&gt;
                                  &lt;/h4&gt;
                                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
                                  &lt;a href="#" class="btn btn-light"&gt;Learn More&lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- /.row (nested) --&gt;
                  &lt;/div&gt;
                  &lt;!-- /.col-lg-10 --&gt;
              &lt;/div&gt;
              &lt;!-- /.row --&gt;
          &lt;/div&gt;
          &lt;!-- /.container --&gt;
      &lt;/section&gt;
  
      &lt;!-- Callout --&gt;
      &lt;aside class="callout"&gt;
          &lt;div class="text-vertical-center"&gt;
              &lt;h1&gt;Vertically Centered Text&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/aside&gt;
  
      &lt;!-- Portfolio --&gt;
      &lt;section id="portfolio" class="portfolio"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-10 col-lg-offset-1 text-center"&gt;
                      &lt;h2&gt;Our Work&lt;/h2&gt;
                      &lt;hr class="small"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-6"&gt;
                              &lt;div class="portfolio-item"&gt;
                                  &lt;a href="#"&gt;
                                      &lt;img class="img-portfolio img-responsive" src="img/portfolio-1.jpg"&gt;
                                  &lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-6"&gt;
                              &lt;div class="portfolio-item"&gt;
                                  &lt;a href="#"&gt;
                                      &lt;img class="img-portfolio img-responsive" src="img/portfolio-2.jpg"&gt;
                                  &lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-6"&gt;
                              &lt;div class="portfolio-item"&gt;
                                  &lt;a href="#"&gt;
                                      &lt;img class="img-portfolio img-responsive" src="img/portfolio-3.jpg"&gt;
                                  &lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-6"&gt;
                              &lt;div class="portfolio-item"&gt;
                                  &lt;a href="#"&gt;
                                      &lt;img class="img-portfolio img-responsive" src="img/portfolio-4.jpg"&gt;
                                  &lt;/a&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- /.row (nested) --&gt;
                      &lt;a href="#" class="btn btn-dark"&gt;View More Items&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;!-- /.col-lg-10 --&gt;
              &lt;/div&gt;
              &lt;!-- /.row --&gt;
          &lt;/div&gt;
          &lt;!-- /.container --&gt;
      &lt;/section&gt;
  
      &lt;!-- Call to Action --&gt;
      &lt;aside class="call-to-action bg-primary"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-12 text-center"&gt;
                      &lt;h3&gt;The buttons below are impossible to resist.&lt;/h3&gt;
                      &lt;a href="#" class="btn btn-lg btn-light"&gt;Click Me!&lt;/a&gt;
                      &lt;a href="#" class="btn btn-lg btn-dark"&gt;Look at Me!&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/aside&gt;
  
      &lt;!-- Map --&gt;
      &lt;section id="contact" class="map"&gt;
          &lt;iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;amp;source=s_q&amp;amp;hl=en&amp;amp;geocode=&amp;amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;amp;aq=0&amp;amp;oq=twitter&amp;amp;sll=28.659344,-81.187888&amp;amp;sspn=0.128789,0.264187&amp;amp;ie=UTF8&amp;amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;amp;t=m&amp;amp;z=15&amp;amp;iwloc=A&amp;amp;output=embed"&gt;&lt;/iframe&gt;
          &lt;br /&gt;
          &lt;small&gt;
              &lt;a href="https://maps.google.com/maps?f=q&amp;amp;source=embed&amp;amp;hl=en&amp;amp;geocode=&amp;amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;amp;aq=0&amp;amp;oq=twitter&amp;amp;sll=28.659344,-81.187888&amp;amp;sspn=0.128789,0.264187&amp;amp;ie=UTF8&amp;amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;amp;t=m&amp;amp;z=15&amp;amp;iwloc=A"&gt;&lt;/a&gt;
          &lt;/small&gt;
          &lt;/iframe&gt;
      &lt;/section&gt;
  
      &lt;!-- Footer --&gt;
      &lt;footer&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-10 col-lg-offset-1 text-center"&gt;
                      &lt;h4&gt;&lt;strong&gt;Start Bootstrap&lt;/strong&gt;
                      &lt;/h4&gt;
                      &lt;p&gt;3481 Melrose Place&lt;br&gt;Beverly Hills, CA 90210&lt;/p&gt;
                      &lt;ul class="list-unstyled"&gt;
                          &lt;li&gt;&lt;i class="fa fa-phone fa-fw"&gt;&lt;/i&gt; (123) 456-7890&lt;/li&gt;
                          &lt;li&gt;&lt;i class="fa fa-envelope-o fa-fw"&gt;&lt;/i&gt;  &lt;a href="mailto:name@example.com"&gt;name@example.com&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;br&gt;
                      &lt;ul class="list-inline"&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;&lt;i class="fa fa-facebook fa-fw fa-3x"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;&lt;i class="fa fa-twitter fa-fw fa-3x"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;&lt;i class="fa fa-dribbble fa-fw fa-3x"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;hr class="small"&gt;
                      &lt;p class="text-muted"&gt;Copyright &amp;copy; Your Website 2014&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  
      &lt;!-- jQuery --&gt;
      &lt;!-- Bootstrap Core JavaScript --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Custom Theme JavaScript --&gt;
      &lt;script&gt;
      // Closes the sidebar menu
      $("#menu-close").click(function(e) {
          e.preventDefault();
          $("#sidebar-wrapper").toggleClass("active");
      });
  
      // Opens the sidebar menu
      $("#menu-toggle").click(function(e) {
          e.preventDefault();
          $("#sidebar-wrapper").toggleClass("active");
      });
  
      // Scrolls to the selected menu item on the page
      $(function() {
          $('a[href*=#]:not([href=#]):not([href=#myCarousel])').click(function() {
              if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
  
                  var target = $(this.hash);
                  target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                  if (target.length) {
                      $('html,body').animate({
                          scrollTop: target.offset().top
                      }, 1000);
                      return false;
                  }
              }
          });
      });
      &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>