我正在尝试制作轮播展示餐厅页面的图片。我按照引导教程视频进行编码。
一切似乎都正常，但是轮播拒绝移动，所以我认为这可能与javascript有关。但是，我找不到问题所在。我已经尝试过：删除“ 5000”属性，但是它什么也没做。
然后我尝试在stak片段工具中运行代码，并告诉我需要jquery。这很奇怪，因为在代码末尾有对Jquery的调用。
非常感谢您的帮助！
巴斯蒂安
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> bootstrap exercises </title>
<!latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<html>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- data-ride calls the javascript, via bootstrap needed for the carousel to be animated -->
<div data-ride="carousel" id="my-slider" class="carousel slide" data-keyboard="false" data-interval="1500" >
<!-- indicators -->
<ul class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"> 0</li>
<li data-target="#my-slider" data-slide-to="1"> </li>
<li data-target="#my-slider" data-slide-to="2"> </li>
<li data-target="#my-slider" data-slide-to="3"> </li>
<li data-target="#my-slider" data-slide-to="4"></li>
<li data-target="#my-slider" data-slide-to="5"> </li>
<li data-target="#my-slider" data-slide-to="6"> </li>
<li data-target="#my-slider" data-slide-to="7"> </li>
<li data-target="#my-slider" data-slide-to="8"> </li>
<li data-target="#my-slider" data-slide-to="9"> </li>
<li data-target="#my-slider" data-slide-to="10"> </li>
</ul>
<!-- wrapper for slides-->
<div class="carousel-inner " >
<div class="carousel-item active">
<img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2016/11/19/12/44/burgers-1839090__340.jpg" alt=" juicy flamed grill">
<div class="carousel-caption">
<p> Here a picture of our juicy flamed grill burger </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2020/02/24/15/14/parsley-4876518__340.jpg" alt="do not feel guilty pasta plate ">
<div class="carousel-caption">
<p> Here a picture of our pasta plate </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2015/08/19/01/02/avocado-895361__340.jpg" alt=" sweet potatoes fries">
<div class="carousel-caption">
<p>Sweet potatoes fries with 2 sauces and spices </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2018/07/17/12/43/steak-3544070__340.jpg" alt="Irish grilled steak with 5% only fat ">
<div class="carousel-caption">
<p> Here a picture of our famous irish steak </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2019/10/13/14/23/spaghetti-bolognese-4546233__340.jpg ">
<div class="carousel-caption">
<p> Spaghetti bolognese with 0% fat beef and fresh tomatoes/mushrooms </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100" src=" https://cdn.pixabay.com/photo/2016/03/05/20/07/abstract-1238657__340.jpg" alt="Entry : tuna peaches, Main course : celtic lamb, Desert : proteined bananas ">
<div class="carousel-caption">
<p>Entry : tuna peaches, Main course : celtic lamb, Desert : proteined bananas </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2016/04/06/17/45/salmon-1312372__340.jpg" alt=" scottish salmone">
<div class="carousel-caption">
<p> Entry : 10g of caviar layed on a rice leaf, Main course : rare piece of Salmone from Scotland, Desert : top quality belgian chocolate </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100" src="https://cdn.pixabay.com/photo/2018/02/07/08/50/kobe-3136608__340.jpg" alt="Piece of Wagyu beef : 150g ">
<div class="carousel-caption">
<p>Piece of Wagyu beef : 150g </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2016/08/01/22/08/buffet-1562290__340.jpg" alt=" assiette mixte">
<div class="carousel-caption">
<p> assiette mixte : vegetables </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100" src="https://media.istockphoto.com/photos/cold-smoked-meat-platter-snacks-set-picture-id1159740379?b=1&k=6&m=1159740379&s=170667a&w=0&h=JsuWStBo_Alh2g0DLjLpX4sq1DiFL9znEV1mfrsbyeA=" alt=" mix viande">
<div class="carousel-caption">
<p> assiette mixte : viande</p>
</div>
</div>
</div>
<!-- next and prev buttons -->
<a class= "carousel-control-prev" href="#my-slider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"> </span>
<span class="sr-only">Previous</span>
</a>
<a class=" carousel-control-next" href="#my-slider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"> </span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<!-- Javascript files linked at the bottom of the page-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
</body>
</html>
答案 0 :(得分：0)
您没有在之前（必须是）js引导程序添加jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> bootstrap exercises </title>
<!latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<html>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- data-ride calls the javascript, via bootstrap needed for the carousel to be animated -->
<div data-ride="carousel" id="my-slider" class="carousel slide" data-keyboard="false" data-interval="1500" >
<!-- indicators -->
<ul class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"> 0</li>
<li data-target="#my-slider" data-slide-to="1"> </li>
<li data-target="#my-slider" data-slide-to="2"> </li>
<li data-target="#my-slider" data-slide-to="3"> </li>
<li data-target="#my-slider" data-slide-to="4"></li>
<li data-target="#my-slider" data-slide-to="5"> </li>
<li data-target="#my-slider" data-slide-to="6"> </li>
<li data-target="#my-slider" data-slide-to="7"> </li>
<li data-target="#my-slider" data-slide-to="8"> </li>
<li data-target="#my-slider" data-slide-to="9"> </li>
<li data-target="#my-slider" data-slide-to="10"> </li>
</ul>
<!-- wrapper for slides-->
<div class="carousel-inner " >
<div class="carousel-item active">
<img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2016/11/19/12/44/burgers-1839090__340.jpg" alt=" juicy flamed grill">
<div class="carousel-caption">
<p> Here a picture of our juicy flamed grill burger </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2020/02/24/15/14/parsley-4876518__340.jpg" alt="do not feel guilty pasta plate ">
<div class="carousel-caption">
<p> Here a picture of our pasta plate </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2015/08/19/01/02/avocado-895361__340.jpg" alt=" sweet potatoes fries">
<div class="carousel-caption">
<p>Sweet potatoes fries with 2 sauces and spices </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2018/07/17/12/43/steak-3544070__340.jpg" alt="Irish grilled steak with 5% only fat ">
<div class="carousel-caption">
<p> Here a picture of our famous irish steak </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2019/10/13/14/23/spaghetti-bolognese-4546233__340.jpg ">
<div class="carousel-caption">
<p> Spaghetti bolognese with 0% fat beef and fresh tomatoes/mushrooms </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100" src=" https://cdn.pixabay.com/photo/2016/03/05/20/07/abstract-1238657__340.jpg" alt="Entry : tuna peaches, Main course : celtic lamb, Desert : proteined bananas ">
<div class="carousel-caption">
<p>Entry : tuna peaches, Main course : celtic lamb, Desert : proteined bananas </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2016/04/06/17/45/salmon-1312372__340.jpg" alt=" scottish salmone">
<div class="carousel-caption">
<p> Entry : 10g of caviar layed on a rice leaf, Main course : rare piece of Salmone from Scotland, Desert : top quality belgian chocolate </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100" src="https://cdn.pixabay.com/photo/2018/02/07/08/50/kobe-3136608__340.jpg" alt="Piece of Wagyu beef : 150g ">
<div class="carousel-caption">
<p>Piece of Wagyu beef : 150g </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100"src="https://cdn.pixabay.com/photo/2016/08/01/22/08/buffet-1562290__340.jpg" alt=" assiette mixte">
<div class="carousel-caption">
<p> assiette mixte : vegetables </p>
</div>
</div>
<div class="carousel-item">
<img class ="d-block w-100" src="https://media.istockphoto.com/photos/cold-smoked-meat-platter-snacks-set-picture-id1159740379?b=1&k=6&m=1159740379&s=170667a&w=0&h=JsuWStBo_Alh2g0DLjLpX4sq1DiFL9znEV1mfrsbyeA=" alt=" mix viande">
<div class="carousel-caption">
<p> assiette mixte : viande</p>
</div>
</div>
</div>
<!-- next and prev buttons -->
<a class= "carousel-control-prev" href="#my-slider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"> </span>
<span class="sr-only">Previous</span>
</a>
<a class=" carousel-control-next" href="#my-slider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"> </span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Javascript files linked at the bottom of the page-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
</body>
</html>