Bootstrap 4 的 Carousel 的實現不起作用
[英]Implementation of Carousel of bootstrap 4 is not working
問題描述
我已經使用 Bootstrap 4 為 carousel 編寫了以下代碼。我已經附加了代碼。 但是，即使使用控件，我也無法將其他幻燈片放入圖片中，只有第一張幻燈片出現在圖片中。 我想知道代碼有什么問題。
carousel.js
<html>
<head>
<title> Carousel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Carousel</title>
<style>
</style>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="Desert.jpg" alt="Desert" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Hydrangeas.jpg" alt="Hydrangeas" style="width:100%;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Jellyfish.jpg" alt="Jellyfish" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<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>
</div>
</body>
</html>
1 個解決方案
解決方案1
0 2020-09-18 07:29:15
您沒有添加Bootstrap JavaScript 插件，因此輪播的幻燈片行為的代碼不可用。 您必須至少將以下<script>添加到<head>中：
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
您的工作示例：
<html> <head> <title> Carousel</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js"></script> <!-- Bootstrap CSS and JS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h2>Carousel Example</h2> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <!-- wrapper for slides --> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://placehold.it/100x101" alt="Desert" style="width:100%;"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://placehold.it/100x102" alt="Hydrangeas" style="width:100%;"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://placehold.it/100x103" alt="Jellyfish" style="width:100%;"> </div> </div> <!-- left and right controls --> <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> </div> </body> </html>
Bootstrap Carousel模板無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.