title: bootstrap carousel controls is not working
body: <p>I am not expert with bootstrap , but the carousel auto-slide is working well
  but when clicking on the carousel arrows (right/next-left/prev)
  these controls not working</p>
  
  <p>how to make it work?</p>
  
  <p>the code</p>
  
  <p>header</p>
  
  <pre><code>&lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="css/glitch.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/sweetalert.css"&gt;
      &lt;link rel="stylesheet" href="css/animate.css"&gt;
      &lt;link rel="stylesheet" href="css/index.css"&gt;
  
      &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/pace.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.lettering.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.textillate.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.transit.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/smoothscroll.js"&gt;&lt;/script&gt;
      &lt;script src="js/sweetalert.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.vide.js"&gt;&lt;/script&gt;
      &lt;script src="js/index.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>the carousel</p>
  
  <pre><code>&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" role="listbox"&gt;
      &lt;div class="item active"&gt;
        &lt;img width="960" height="384" src="img/slider1.jpg" alt="slider1"&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img width="960" height="384" src="img/slider2.jpg" alt="slider2"&gt;
      &lt;/div&gt;
        &lt;div class="item"&gt;
        &lt;img width="960" height="384" src="img/slider3.jpg" alt="slider3"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Controls --&gt;
    &lt;a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" 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;
  </code></pre>