我的輪播有一些問題。轉到下一張幻燈片需要花費大量時間。當我使用控制元件進行操作時，無論我點擊控制元件多少次，它們都不起作用。我遵循了 Bootstrap 檔案中的所有內容，但它不起作用。
代碼
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/wonyoung.jpg" class="d-block w-100" alt="loading">
</div>
<div class="carousel-item">
<img src="images/seungyoun.jpg" class="d-block w-100" alt="loading">
</div>
<div class="carousel-item">
<img src="images/yuri.jpg" class="d-block w-100" alt="loading">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
uj5u.com熱心網友回復：
您可能忘記添加 Bootstrap 的 CSS 和 JS 檔案。
方法一：
將樣式表復制粘貼<link>到<head>所有其他樣式表之前，以加載我們的 CSS。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
將以下<script>s 放在頁面末尾附近，就在結束</body>標記之前，以啟用它們。jQuery 必須首先出現，然后是 Popper，然后是我們的 JavaScript 插件。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
方法二：
使用入門模板
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
方法三：
從此處下載 Bootstrap 以獲取已編譯的 CSS 和 JavaScript 。
另請在此處查看來源。
uj5u.com熱心網友回復：
這是我用來讓輪播作業的代碼，使用.htmlCSS 和 JS 的引導程式匯入粘貼整個檔案。如果您復制/粘貼到.html檔案中并使用 Web 瀏覽器打開它，它應該可以在本地作業。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Bootstrap Carousel Example</title>
</head>
<body>
<div>
<div
id="carouselExampleIndicators"
class="carousel slide"
data-bs-ride="carousel"
>
<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="https://images.ctfassets.net/hrltx12pl8hq/61DiwECVps74bWazF88Cy9/2cc9411d050b8ca50530cf97b3e51c96/Image_Cover.jpg?fit=fill&w=480&h=270"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBsbCAQtQimp5yI0Zx4vyR_FzPLUVzkdjDBN0N4_LAUo59inNQrSp6-Iz7qrfAXBENLGI&usqp=CAU"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRabXZSwdR-7wsXfdtb2Xdy0Tl9o6l1D-UcQnyVN0WxQ9TmPE8SkEh0s9opAyZy-x5DnYY&usqp=CAU"
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>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p"
crossorigin="anonymous"
></script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/393883.html
標籤：html bootstrap-5
上一篇：如何單擊單詞，使其在通過該單擊打開的程式中進行搜索？
下一篇：子列不可能使用flexbox