如何修复Bootstrap卡片Carousel无法切换及bootstrap未定义的问题？

一、解决"bootstrap is not defined"错误 #

1. 检查资源引入顺序
   必须按以下顺序引入资源：先加载Bootstrap CSS，再加载Popper.js（Bootstrap组件依赖该库），接着加载Bootstrap JS，最后加载你的自定义JS文件。顺序错误会导致bootstrap全局对象无法被识别。
2. 修正DOM选择器
   你的轮播容器ID是carouselExample，但JS代码中选择的是#myCarousel，两者不匹配导致无法初始化轮播。修改选择器为：

   const myCarouselElement = document.querySelector('#carouselExample')
   

3. 确认Bootstrap JS完整引入
   确保你引入了完整的Bootstrap JS文件，不能只引入CSS部分。无论是本地文件还是CDN资源，都要包含JS模块。

二、修正轮播结构，实现单张卡片显示 #

Bootstrap轮播要求.carousel-inner的直接子元素必须是.carousel-item，你当前直接将.card作为子元素，导致卡片垂直堆叠。需要调整结构：

• 每个卡片外层包裹.carousel-item容器
• 仅给第一个.carousel-item添加active类（原代码中给.card加的active需要移到.carousel-item上）

修正后的完整HTML代码 #

<div id="carouselExample" class="carousel slide">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="card" style="width: 12rem;">
                <img src="https://static.americasbestracing.net/s3fs-public/styles/large/public/reylu-gutierrez.jpg?KHONSa1SS2GQbZtqmIed8QZzxaE.XX.4&itok=AKl_nQxN" class="card-img-top" alt="...">
                <div class="card-body">
                <p class="card-text">Reylu Gutierrez.</p>
                </div>
            </div>
        </div>

        <div class="carousel-item">
            <div class="card" style="width: 12rem;">
                <img src="https://www.nyra.com/uploads/profile-images/eric-cancel.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                <p class="card-text">Eric Cancel.</p>
                </div>
            </div>
        </div>

        <div class="carousel-item">
            <div class="card" style="width: 12rem;">
                <img src="https://www.nyra.com/uploads/profile-images/manuel-franco.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                <p class="card-text">Manuel Franco.</p>
                </div>
            </div>
        </div>

        <div class="carousel-item">
            <div class="card" style="width: 12rem;">
                <img src="https://www.nyra.com/uploads/profile-images/joel-rosario.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                <p class="card-text">Joel Rosario.</p>
                </div>
            </div>
        </div>

        <div class="carousel-item">
            <div class="card" style="width: 12rem;">
                <img src="https://live.staticflickr.com/65535/43429236045_546119af43_b.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                <p class="card-text">Andre Worrie.</p>
                </div>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
    </button>
</div>

修正后的JS代码 #

const myCarouselElement = document.querySelector('#carouselExample')

const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  touch: false
})

完成以上修改后，轮播即可正常工作：一次仅显示一张卡片，点击切换箭头可完成卡片切换，同时解决bootstrap is not defined的错误。

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