Bootstrap轮播组件前后切换按钮失效问题求助

可能的原因及修复步骤： #

• 手动初始化轮播组件：
  自动初始化偶尔会因DOM加载时序问题失效，可通过手动JS代码强制初始化。在现有脚本后添加以下代码：

  document.addEventListener('DOMContentLoaded', function() {
    const carousel = new bootstrap.Carousel(document.getElementById('testimonial-carousel'));
  });
  

• 检查ID唯一性：
  确保页面中没有其他元素使用testimonial-carousel这个ID，重复ID会导致Bootstrap无法正确定位轮播容器。

• 验证Bootstrap JS加载状态：
  打开浏览器控制台，输入bootstrap.Carousel，如果返回ƒ Carousel(element, config)则说明JS已正确加载；若返回undefined，检查CDN链接是否可正常访问，或替换为稳定的Bootstrap JS链接。

• 添加自动初始化属性：
  在轮播容器上添加data-bs-ride="carousel"属性，确保组件在页面加载时自动初始化：

  <div id="testimonial-carousel" class="carousel slide" data-bs-ride="carousel">
  

修改后的完整代码示例： #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div id="testimonial-carousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
      <img class="testi-img" src="https://via.placeholder.com/300x100" alt="dog-profile">
      <em>Pebbles, New York</em>
    </div>
    
    <div class="carousel-item">
      <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
      <img class="testimonial-image" src="https://via.placeholder.com/300x100" alt="lady-profile">
      <em>Beverly, Illinois</em>
    </div>
  </div>
  
  <button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" 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="#testimonial-carousel" 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.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const carousel = new bootstrap.Carousel(document.getElementById('testimonial-carousel'));
});
</script>

内容的提问来源于stack exchange，提问作者DÉATH SLAYER