时间戳

首页 > 解决方案 > 轮播没有错误，左/右按钮不起作用

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

问题描述

我的引导轮播按钮不起作用。当前显示第一张图像，按钮也显示，但是图像本身不会改变，当我按下按钮时也不会改变。

这是针对我正在制作的使用 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>

我希望在呈现页面后轮播按钮能够正常工作，但是控制台中没有错误。

标签： htmlbootstrap-4carousel

解决方案

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

推荐阅读