Question

我的Bootstrap Carousel按钮不起作用。目前，第一个图像显示了，按钮也显示了，但是当我按下按钮时，图像本身并没有改变。

这是针对我正在使用Express运行的Web应用程序。我尝试过更改一些代码片段，但是没有什么可以改变幻灯片。有3张图片，其他2张图片因为未处于活动状态而没有显示，所以我确实有1张以上图片。


<!--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>

我希望页面呈现后，“轮播”按钮会起作用，但是控制台中没有没有错误。

Answer 1

我刚发现问题，所以如果您也遇到此问题，请听！

您需要确保拥有最新版本的Bootstrap JS 和 CSS。

两个版本必须相同；我有最新的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>

轮播没有错误，左/右按钮不起作用

2 个答案: