单张图像轮播中出现两张图片

Question

轮播中的活动图像出现在轮播的左上角，但下一张图片出现在中间。当我改变时就会发生这种情况

.carousel-item {
            height: 300px;
            display: flex;
            
        }

    .carousel-item img {
        height: 50%; Make images fill the carousel item
        /* object-fit: contain; Ensures the image covers the area without distortion */
        width:  auto;
        justify-content: center;
        align-items: center;
    }

这个

到

这个

   .carousel-item {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    .carousel-item img {
        height: 50%; Make images fill the carousel item
        /* object-fit: contain; Ensures the image covers the area without distortion */
        width:  auto;

    }

我试图使活动图像出现在中心，但它一直出现在左上角，然后幻灯片中的下一个图像突然出现在中心

<style>
.carousel-item {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    .carousel-item img {
        height: 50%; Make images fill the carousel item
        /* object-fit: contain; Ensures the image covers the area without distortion */
        width:  auto;

    }
</style>

{{-- Card --}}
    <div class="bg-white rounded overflow-hidden shadow p-4">

            {{-- Carousel display --}}
            @if(empty($selectedImages))
            
                <div class="tw-flex tw-justify-center shadow px-6 py-4 tw-max-w-md tw-rounded tw-overflow-hidden tw-shadow-lg">               
                    No selected images to display    
                </div>

            @else 
                <div id="carouselExampleCaptions" class="carousel slide shadow">
                    <div class="carousel-indicators">
                        @foreach ($selectedImages as $index => $image)
                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{ $index }}" class="{{ $index == 0 ? 'active' : '' }}" aria-current="{{ $index == 0 ? 'true' : 'false' }}" aria-label="Slide {{ $index + 1 }}"></button>
                        @endforeach    
                    </div>
                    <div class="carousel-inner shadow">                
                        @foreach ($selectedImages as $index => $image)
                        <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                            <img src="{{ asset('storage/banners/' . $image) }}"  alt="Slide {{ $index + 1 }}" />                    
                        </div>
                        @endforeach                
                    </div>

                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon bg-gray" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                    <span class="carousel-control-next-icon bg-gray" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                    </button>
                </div>
            @endif
    </div>