Bootstrap.js Карусель с текстом

Я следую этому учебнику, чтобы сделать слайд карусели.

Когда я определяю каждый элемент, содержащий изображение и абзац, как -

<div class="item">
    <img src="http://placehold.it/1200x480" alt="" />
    <div class="carousel-caption">
        <p>Caption text here</p>
    </div>
</div>

он отлично работает (здесь его jsFiddle).

Но когда я уменьшаю его до абзаца только как -

<div class="item">
    <div class="carousel-caption">
        <p>Caption text here</p>
    </div>
</div>

он перестает работать (вот его jsFiddle).

Как я могу заставить его работать только с абзацем, таким как скользящий текст каждого переключателя?

Ответ 1

Свойство position заголовка. carousel вызывало проблему, без изображения, которое оно скрывает, поэтому установите его на static:

.carousel-caption{
    position:static;
}

Здесь демо-версия работает как с изображением, так и без него:

DEMO

Ответ 2

См. после удаления изображения и оставления только абзаца

я дал классу контейнера элементов ширину и высоту изображения с цветом фона для div, чтобы указать, что присутствие просто скопирует и вставляет этот код в раздел скрипта css и запускается, чтобы увидеть изменение

.item{
    height:480px;
    width:1200px;
    background-color:orange;
}

Ответ 3

Самый простой способ - просто сделать изображения, которые являются цветом фона. Если вам нужен более чистый способ сделать это, вы можете, вероятно, добиться такого же эффекта, используя CSS.

Ответ 4

У меня была такая же проблема. Этот ответ прост и оптимизирует решение этой проблемы: fooobar.com/info/155384/...