轮播中的活动图像出现在轮播的左上角,但下一张图片出现在中间。当我改变时就会发生这种情况
.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>