轮播在我的代码中不起作用，我使用了Bootstrap

Question

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <% campground.images.forEach((img,i)=> { %>
                        <div class="carousel-item <%= i===0?'active':'' %>">
                            <img class="d-block w-100" src="<%=img.url%>" alt="Image <%= i %>">
                        </div>
                        <% }); %>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only"></span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only"></span>
                </a>
            </div>

这是我的代码，正在显示一张图像，但轮播无法滑动以查看我添加的更多图像。有人可以帮我找到这里的错误吗...

我做了 console.log(images) ，它是一个对象数组，其中包含 img 作为属性，其 url 为值。 我希望轮播能够工作。

Answer 1

正如引导文档中提到的，它应该是

data-bs-side="carousel"

（不是数据端） data-slide="prev" 和 next 也是如此，应该是

data-bs-slide

确保您已正确导入 js 和 css bootstrap。