使用引导程序堆叠的轮播图像

Question

我正在使用Bootstrap 4.3.1。我正在尝试创建一个简单的轮播。图片堆积了，我找不到解决方案。我尝试过其他帖子中的解决方案，但根本没有用。

HTML：

<div th:if="${activeCarousel} eq 'active'" >
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="center-block" th:src="${firstImage.image}" alt="Image"
                            style="width: 50%;">

                    </div>
                    <div class="carousel-item" th:each="image : ${Images}">
                        <img class="center-block" th:src="${image.image}" alt="Image"
                            style="width: 50%;">

                    </div>
                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" role="button"
                    data-slide="prev"> <span
                    class="glyphicon glyphicon-chevron-left"></span> <span
                    class="sr-only">Previous</span>
                </a> 
                <a class="right carousel-control" href="#myCarousel" role="button"
                    data-slide="next"> <span
                    class="glyphicon glyphicon-chevron-right"></span> <span
                    class="sr-only">Next</span>
                </a>
            </div>
    </div>

我正在使用Spring MVC和Thymeleaf。我的控制器类：

@GetMapping(path = "/myProfile")
public final String getMyProfile(ModelMap model) {
    Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
    User user = getUserService().findByUsername(authentication.getName());

    List<ImageDto> imagesDto = getImageService().imageListToImageDtoListConversor
            (getImageService().getImagesByUserId(user.getId()));
    model.put("currentUser", user);
    if (imagesDto.size() > 0) {
        model.put("activeCarousel", "active");
        model.put("firstImage", imagesDto.get(0));
        imagesDto.remove(0);
        model.put("Images", imagesDto);
    }
    return EntityViewConstants.VIEW_ENTITY_MY_PROFILE;
}