轮播没有错误，Left/Right 按钮不起作用

Question

我的 Bootstrap 旋转木马按钮不起作用。目前显示第一张图片，按钮也显示，但是图片本身不会改变，按下按钮时也不会改变。

这是我正在制作的 Web 应用程序，运行使用 Express。我试过改变一些代码片段，但没有改变幻灯片。有 3 张图片，另外 2 张没有显示，因为它们未激活，所以 我有不止一张图片。


<!--Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
  $(document).ready(function(){
    $('.carouselExampleControls').carousel({
      interval: 3000
    })
  })
</script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="/assets/css/main.css">

<!--Carousel Code -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg"
        alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg"
        alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg"
        alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span> 
    <span class="sr-only">Next</span>
  </a>
</div>

我希望页面呈现后 Carousel 按钮可以正常工作，但是控制台中没有错误。

Answer 1

我刚刚发现了这个问题，所以如果你也遇到了这个问题听好了！

您需要确保您拥有 Bootstrap JS 和 CSS.

的 up-to-date 版本

两个版本必须相同；我有最新的 CSS 但没有 JS。

我的轮播可以使用了，感谢帮助过的人

Answer 2

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Carousel</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>  

 <script language="JavaScript" type="text/javascript">
  $(document).ready(function(){
    $('.carouselExampleControls').carousel({
    interval: 3000
    })
  })
 </script>  

 </head>

 <body>

 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

     <ol class="carousel-indicators">
         <li data-target="#carouselExampleControls" data-slide-to="0" class="active"></li>
         <li data-target="#carouselExampleControls" data-slide-to="1"></li>
         <li data-target="#carouselExampleControls" data-slide-to="2"></li>
     </ol>  


     <div class="carousel-inner">
         <div class="item active">
             <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt="First slide">
         </div>
         <div class="item">
             <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" alt="Second slide">
         </div>
         <div class="item">
             <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" alt="Third slide">
         </div>
     </div>

     <a class="left carousel-control" href="#carouselExampleControls" role="button" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>
         <span class="sr-only">Previous</span>
     </a>
     <a class="right carousel-control" href="#carouselExampleControls" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span> 
         <span class="sr-only">Next</span>
     </a>

 </div>

 </body>
 </html>

轮播没有错误，Left/Right 按钮不起作用

No errors with Carousel, Left/Right Buttons do not function

html

carousel

bootstrap-4