How to loop through database images to display them into a carousel?

I am looping through an array of images in the database to display images in a carousel. My carousel don’t seem to like it as images are sliding outside the carousel : see video attached : Screen recording 2022-01-10 17.42.24

<div id="carouselExampleControls" class="carousel slide w-100" data-bs-ride="false">
        <div class=”carousel-inner”>
          <%@annonce.images_urls.each_with_index do |pic,i|%>
            <div class="carousel-item <%= "active" if i==0 %>">
                 <%= image_tag  pic, :class=>"d-block w-100" %>
                 <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Next</span>
                </button>
            </div>
          <%end%>          
        </div>        
      </div>

Your issue doesn’t seem to be getting the images from the database. I think your issue is CSS related…