Bootstrap 5.2 Carousel问题：visually-hidden失效、样式异常及滑动卡顿

你的所有问题根源都是同时引入了Bootstrap 4.3.1的CSS和Bootstrap 5.2.2的JS，版本不匹配导致样式和交互全部异常，统一版本就能解决所有问题。

问题拆解与修复方案 #

• 可见的visually-hidden点击区域：Bootstrap 4和5的隐藏类实现逻辑不同，版本混用导致隐藏失效，按钮内的"Previous/Next"文本显示出来。替换成Bootstrap 5的CSS即可修复。
• 底部指示器样式异常：Bootstrap 5的指示器样式依赖自身CSS框架，用4的CSS会导致样式错乱，统一版本后样式会恢复正常。
• 轮播滑动不流畅：JS和CSS版本不兼容，动画逻辑与样式不匹配，统一版本后滑动动画会回归流畅。

修正后的完整代码 #

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 替换为Bootstrap 5.2的CSS，和JS版本统一 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  <link rel="stylesheet" href="css/stylesheet.css">

  <title>Home</title>
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  
  <div>
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand mb-0 h1" href="#">Miltons Hotel</a>
        <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" class="navbar-toggler" aria-controls="navbarNav" aria-expanded="false" aria-label="toggle-navigation">
          <span class="navbar-toggler-icon"></span>
          Menu
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a href="index.html" class="nav-link">Home</a>
            </li>
            <li class="nav-item ">
              <a href="Impressum.html" class="nav-link">Impressum</a>
            </li>
            <li class="nav-item ">
              <a href="Hilfe.html" class="nav-link">Help</a>
            </li>
            <li class="nav-item dropdown">
              <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false" role="button">
                Login
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li>
                  <a href="Loginuser.html" class="dropdown-item">Login</a>
                </li>
                <li>
                  <a href="Registrierung.html" class="dropdown-item">Sign Up</a>
                </li>
              </ul>
          </ul>
          <div class="ml-auto"></div>
          <form class="d-flex">
            <input type="text" class="form-control me-2">
            <button type="submit" class="btn btn-primary">
              Search
            </button>
          </form>
        </div>
      </div>
    </nav>

    <div id="slider" class="carousel slide text-container" data-bs-ride="carousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#slider" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#slider" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#slider" data-bs-slide-to="2" aria-label="Slide 3"></button>
      </div>

      <div class="carousel-inner">
        <div class="carousel-item active c-item">
          <img src="img/carousel1.jpg" class="d-block w-100 c-image" alt="Slide 1">
        </div>
        <div class="carousel-item c-item">
          <img src="img/carousel2.jpg" class="d-block w-100 c-image" alt="Slide 2">
        </div>
        <div class="carousel-item c-item">
          <img src="img/carousel3.jpg" class="d-block w-100 c-image" alt="Slide 3">
        </div>
      </div>

      <button class="carousel-control-prev" type="button" data-bs-target="#slider" 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="#slider" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>

    <div class="container text-container">
      <div class="row">
        <div class="col-12">
          <h1>Milton Hotels</h1>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS部分

h1 {
  text-align: center;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 50px;
}

.row {
  height: 120px;
}

.text-container {
  padding-top: 56px;
}

.c-item {
  height: 500px;
}

.c-image {
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}

内容的提问来源于stack exchange，提问作者Maximilian Trostmann