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

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

Сообщение 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»