Bootstrap Carousel 不滑動？
[英]Bootstrap Carousel not sliding?
問題描述
我正在嘗試構建一個由 3 個 svg 圖標組成的輪播。 我從 Bootstrap 中獲取了原始 HTML。 但是，它不會滑動。 它只顯示第一個圖標，沒有可滑動的箭頭。 由於我仍然是 HTML 初學者，我真的很想有人解釋這個問題，我想不通。 這是我的一段 HTML 代碼：
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/EDARA.svg" style ="height: 200px;" class="d-block w-100" alt="...">
<br> <br> <br> <br> <br>
<div class="carousel-caption d-none d-md-block">
<h4 style="color: grey">e-DARA</h4>
<p style="color: grey;">A fully fledged government solution </p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/MIGRATIONKIT.svg" style = "height: 200px;" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h4 style = "color: grey">Migration Kit</h4>
<p>A tool allowing email migration from any source to a Private or Public Cloud </p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div> ```
1 個解決方案
解決方案1
0 2022-07-18 14:12:26
您是否為引導程序導入了 javascript？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
</head>
<body>
<h1>Hello, world!</h1>
<div
id="carouselExampleIndicators"
class="carousel slide container"
data-bs-ride="true"
>
<div class="carousel-indicators">
<button
type="button"
data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleIndicators"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img
src="assets/images/image.png"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item">
<img
src="assets/images/image.png"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item">
<img
src="assets/images/image.png"
class="d-block w-100"
alt="..."
/>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleIndicators"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
</body>
</html>
注意<link>和<script>標簽
輪播不會自動滑動JQuery 1.12.4和Bootstrap 3.3.6
[英]Carousel not sliding automatically JQuery 1.12.4 and Bootstrap 3.3.6
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.