传送带控制器不起作用(Carousel controllers don't work)

我从Bootstrap页面复制这个轮播代码，并编辑轮播的内容。

但即使我将控制器移动到“div”元素内，控制器也不起作用。

（但如果我在只有旋转木马的空白页面中测试它，它会起作用。）

当我在我的工作页面中测试此代码时，它们不起作用

这是我的代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <title>Thai Chiang Mai</title>  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">  <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="jquery-3.2.1.min.js"> </head> <body> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol>  <div class="carousel-inner"> <div class="item active"> <img src="img/food/bonchon.jpg" alt="bonchon" style="width:100%;" class="img-responsive"> </div> <div class="item"> <img src="img/food/green_curry.jpeg" alt="Curry" style="width:100%;" class="img-responsive"> </div> <div class="item"> <img src="img/food/kai.jpg" alt="Kai" style="width:100%;" class="img-responsive"> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>

I copy this carousel code from Bootstrap page and I edit contents of the carousel.

But controllers don't work even though I move controllers inside the " div " element.

( But it works if I test it in a blank page with only carousel.)

When I test this code in my working page , they don't work

Here is my code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <title>Thai Chiang Mai</title>  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">  <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="jquery-3.2.1.min.js"> </head> <body> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol>  <div class="carousel-inner"> <div class="item active"> <img src="img/food/bonchon.jpg" alt="bonchon" style="width:100%;" class="img-responsive"> </div> <div class="item"> <img src="img/food/green_curry.jpeg" alt="Curry" style="width:100%;" class="img-responsive"> </div> <div class="item"> <img src="img/food/kai.jpg" alt="Kai" style="width:100%;" class="img-responsive"> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>