title: Carousel controllers don't work
body: <p>I copy this carousel code from Bootstrap page and I edit contents of the carousel. </p>
  
  <p>But controllers don't work
  even though I move controllers inside the " div " element. </p>
  
  <p>( But it works if I test it in a blank page with only carousel.)</p>
  
  <p>When I test this code in my working page , they don't work</p>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
     &lt;meta name="description" content=""&gt;
     &lt;meta name="author" content=""&gt;
     &lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
     &lt;title&gt;Thai Chiang Mai&lt;/title&gt;
  
     &lt;!-- Bootstrap core CSS --&gt;
     &lt;link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt;
     &lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
  
     &lt;!-- Custom fonts for this template --&gt;
     &lt;link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"&gt;
     &lt;link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"&gt;
     &lt;link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css"&gt;
     &lt;link rel="stylesheet" href="jquery-3.2.1.min.js"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="container"&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;/ol&gt;
  
    &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="item active"&gt;
          &lt;img src="img/food/bonchon.jpg" alt="bonchon" style="width:100%;" class="img-responsive"&gt;
        &lt;/div&gt;
  
          &lt;div class="item"&gt;
              &lt;img src="img/food/green_curry.jpeg" alt="Curry" style="width:100%;" class="img-responsive"&gt;
          &lt;/div&gt;
  
          &lt;div class="item"&gt;
              &lt;img src="img/food/kai.jpg" alt="Kai" style="width:100%;" class="img-responsive"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
          &lt;span class="glyphicon glyphicon-chevron-left"&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" data-slide="next"&gt;
          &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p></p>
  
  <p>
  </p>