Bootstrap 5 轮播幻灯片指示器不工作

Question

目前，我正在为改造我妈妈的网站制作一个旋转木马，除了幻灯片指示器的功能外，其他一切都在工作。每当您转到 prev/next 图像时，指示器都会移动，但如果您单击指示器按钮，它不会将您带到给定的图像。我不知道出了什么问题，可能是一些愚蠢的事情，比如忘记关闭 div 之类的东西。

我的代码如下：

<!-- Landing Carousel -->
<section class="bg">

  <body>
    <div class="container max-high d-flex align-items-center bg-dark pt-lg-5 pt-md-3 pt-3" id="carousel">
      <div id="carouselExampleCaptions" class="carousel slide" data-bs-interval="7500" data-bs-ride="carousel">
        <!-- Slide Indicators -->
        <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-current="true" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="2" aria-current="true" aria-label="Slide 3"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="3" aria-current="true" aria-label="Slide 4"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="4" aria-current="true" aria-label="Slide 5"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="5" aria-current="true" aria-label="Slide 6"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="6" aria-current="true" aria-label="Slide 7"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="7" aria-current="true" aria-label="Slide 8">    
                    </button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="8" aria-current="true" aria-label="Slide 9"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="9" aria-current="true" aria-label="Slide 10"></button>
          <button type="button" data-bs-target="carouselExampleCaptions" data-bs-slide-to="10" aria-current="true" aria-label="Slide 11"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="images/1.png" alt="First Picture of Katie" class="d-block w-100" />

          </div>
          <div class="carousel-item">
            <img src="images/2.png" alt="First Picture of Katie" class="d-block w-100" />

          </div>
          <div class="carousel-item">
            <img src="images/3.png" alt="First Picture of Katie" class="d-block w-100" />

          </div>
          <div class="carousel-item">
            <img src="images/4.png" alt="First Picture of Katie" class="d-block w-100" />

          </div>
          <div class="carousel-item">
            <img src="images/5.png" alt="First Picture of Katie" class="d-block w-100" />

          </div>
          <div class="carousel-item">
            <img src="images/6.png" alt="First Picture of Katie" class="d-block w-100" />

          </div>
          <div class="carousel-item">
            <img src="images/7.png" alt="First Picture of Katie" class="d-block w-100" />

          </div>
          <div class="carousel-item">
            <img src="images/8.png" alt="First Picture of Katie" class="d-block w-100" />

          </div>
          <div class="carousel-item">
            <img src="images/9.png" alt="First Picture of Katie" class="d-block w-100" />

          </div>
          <div class="carousel-item">
            <img src="images/10.png" alt="First Picture of Katie" class="d-block w-100" />

          </div>
          <div class="carousel-item">
            <img src="images/11.png" alt="First Picture of Katie" class="d-block w-100" />

          </div>
        </div>

        <!-- Buttons -->
        <div class="buttons-container">

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

          <!-- Next -->
          <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>
      </div>
    </div>
  </body>
</section>

Answer 1

一切正常。只需在 head 标签中添加以下资源即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body>
    <!-- Landing Carousel -->
<section class="bg">
    <body>
        <div class="container max-high d-flex align-items-center bg-dark pt-lg-5 pt-md-3 pt-3" id="carousel">
            <div
                id="carouselExampleCaptions" 
                class="carousel slide"
                data-bs-interval="7500"
                data-bs-ride="carousel"
            >
            <!-- Slide Indicators -->
                <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-current="true"
                        aria-label="Slide 2"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="2"
                        aria-current="true"
                        aria-label="Slide 3"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="3"
                        aria-current="true"
                        aria-label="Slide 4"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="4"
                        aria-current="true"
                        aria-label="Slide 5"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="5"
                        aria-current="true"
                        aria-label="Slide 6"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="6"
                        aria-current="true"
                        aria-label="Slide 7"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="7"
                        aria-current="true"
                        aria-label="Slide 8"
                    >    
                    </button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="8"
                        aria-current="true"
                        aria-label="Slide 9"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="9"
                        aria-current="true"
                        aria-label="Slide 10"
                    ></button>
                    <button
                        type="button"
                        data-bs-target="carouselExampleCaptions"
                        data-bs-slide-to="10"
                        aria-current="true"
                        aria-label="Slide 11"
                    ></button>
                </div>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        class="d-block w-100"
                        />

                    </div>
                    <div class="carousel-item">
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        class="d-block w-100"
                        />

                    </div>
                    <div class="carousel-item">
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        class="d-block w-100"
                        />

                    </div>
                    <div class="carousel-item">
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        class="d-block w-100"
                        />

                    </div>
                    <div class="carousel-item">
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        class="d-block w-100"
                        />

                    </div>
                    <div class="carousel-item">
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        class="d-block w-100"
                        />

                    </div>
                    <div class="carousel-item">
                        <img 
                        src="ihttps://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        class="d-block w-100"
                        />

                    </div>
                    <div class="carousel-item">
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        class="d-block w-100"
                        />

                    </div>
                    <div class="carousel-item">
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        class="d-block w-100"
                        />

                    </div>
                    <div class="carousel-item">
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        class="d-block w-100"
                        />

                    </div>
                    <div class="carousel-item">
                        <img 
                        src="https://blog.getbootstrap.com/assets/img/2020/06/v5-new-logo.png" 
                        alt="First Picture of Katie"
                        class="d-block w-100"
                        />

                    </div>
                </div>

                <!-- Buttons -->
                <div class="buttons-container">
                    
                    <!-- Previous -->
                    <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>

                    <!-- Next -->
                    <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>
            </div>
        </div>
    </body>
</section>
</body>
<script>
</script>
</html>

Bootstrap 5 轮播幻灯片指示器不工作

Bootstrap 5 Carousel Slide Indicator Not Working

html

javascript

css

twitter-bootstrap