title: Control Bootstrap Carousel Slides using Buttons
body: <p>I want to control the scroll of this carousel using menu bar where there are buttons 1,2,3,4,5 when I click them the carousel should slide to 2nd slide or 3rd slide like that.</p>
  
  <p>I have used HTML, Bootstrap, CSS.</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  
      &lt;div class="row" id="row1"&gt;
          &lt;div class="col-sm-12" style="top: 10%; bottom: 50%;"&gt;
              &lt;h1&gt;AS&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row" id="row2"&gt;
          &lt;div class="col-sm-4" style="top: 10%; bottom: 50%; background-color: white; height: 7.4vh"&gt;
              &lt;h1 style="color: black"&gt;AS&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-8" style="top: 10%; bottom: 50%; background-color: black"&gt;
              &lt;div class="nav"&gt;
                  &lt;ul&gt;
                      &lt;li class="contact"&gt;&lt;a href="#one"&gt;1&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="contact1"&gt;&lt;a href="two"&gt;2&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="about"&gt;&lt;a href="#three"&gt;3&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="about1"&gt;&lt;a href="#four"&gt;4&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="tutorials"&gt;&lt;a href="#five"&gt;5&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row" id="row3"&gt;
          &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
              &lt;!-- Wrapper for slides --&gt;
              &lt;div class="carousel-inner" role="listbox" style="vertical-align: top; position: absolute; background-color:green"&gt;
                  &lt;div class="item active" id="one"&gt;
                      &lt;h1&gt;ABC&lt;/h1&gt;
                  &lt;div class="item" id="two"&gt;
                      &lt;img src="img/B.jpg" alt="Chania"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="item" id="three"&gt;
                      &lt;img src="img/C.jpg" alt="Flower"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="item" id="four"&gt;
                      &lt;img src="img/C.jpg" alt="Flower"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="item" id="five"&gt;
                      &lt;img src="img/C.jpg" alt="Flower"&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 glyphicon-menu-left" aria-hidden="true"&gt;&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 glyphicon-menu-right" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="row" id="row4"&gt;
          &lt;div class="col-sm-12" style="top: 10%; bottom: 50%;"&gt;
              &lt;button class="button" onclick="Contact"&gt;Contact&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>