it-swarm.com.ru

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 ). 

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

10
URL87

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

.carousel-caption{
    position:static;
}

Вот демонстрация того, как он работает с изображением и без него:

ДЕМО

15
I Can Has Kittenz

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

1
Rahul Dass

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

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

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

У меня была такая же проблема. Этот ответ является самым простым и оптимизированным решением для этой проблемы: https://stackoverflow.com/a/25535930/4792775

0
ivahidmontazer