The carousel is not working in my code, I used 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>

This is my code, one image is being displayed but the carousel is not sliding to view further images I added. Can somebody help me find the error here...

I did console.log(images) and it is an array of objects having img as a property in them with it's url being the value. I want the carousel to work.

Answer 1

As mentioned in the bootstrap documentation, it should be data-bs-side="carousel" (not data-side) The same goes for data-slide="prev" and next, it should be data-bs-slide

Make sure you have properly imported js and css bootstrap.