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>