Bootstrap 5 карусель: текст и изображение рядом друг с другом ⇐ CSS

[Anonymous]

Я пытаюсь создать пользовательскую карусель с помощью Bootstrap 5, где каждый слайд содержит текст и изображение, отображаемое рядом. Все работает, как и ожидалось, и слайды расположены правильно. Тем не менее, слайд 3 всегда появляется сверху, даже если он не активен. net /mbj2mi2p.png " /> < /p>
Я ищу способ решить эту проблему (без использования JavaScript). < /p>
Вот код Я работаю с (с совместимостью с JQUERY 4.0+ и Bootstrap 5, как и для веб -сайта Drupal 11): < /p>

Код: Выделить всё

Responsive Bootstrap 5 Carousel
[*]


.carousel-item {
display: flex;
justify-content: center;
align-items: center;
background: #f8f9fa;
}

.carousel-item .item {
display: flex;
width: 100%;
}

.carousel-item .text, .carousel-item .image {
padding: 15px;
}

.carousel-item .text {
flex: 1;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 20px;
}

.carousel-item .image img {
width: 100%;
height: auto;
object-fit: cover;
}

.carousel-caption {
display: none;
}

@media (max-width: 768px) {
.carousel-item .item {
flex-direction: column;
}

.carousel-item .image img {
max-height: 300px;
}
}




Welcome to My Site




[url=#]My Site[/url]




[list]
[url=#]Home[/url]
[*][url=#]About[/url]
[*][url=#]Contact[/url]
[/list]










Slide 1: Lorem ipsum dolor sit amet consectetur, adipisicing elit.  Perspiciatis a modi repellat eaque voluptatibus repellendus veniam quia! Et recusandae quam inventore atque sapiente eius minus quaerat, perferendis, magnam ex fugit.

[img]https://i.ibb.co/39dVTpfY/banner-600300.png[/img]







Slide 2: Description for Slide 2 goes here...

[img]https://i.ibb.co/39dVTpfY/banner-600300.png[/img]







Slide 3: Description for Slide 3 goes here...

[img]https://i.ibb.co/39dVTpfY/banner-600300.png[/img]






Previous



Next










© 2025 My Site. All rights reserved.

Подробнее здесь: https://stackoverflow.com/questions/794 ... each-other